The jQuery ajax is very useful when you want to post or get data from PHP script without page refresh<\/b>. Generally, you return the string to Ajax call for updating a part of the web page. But sometimes requires getting the object or array data from PHP file for showing values in the different area. Using $.ajax()<\/b> method in jQuery you can get JSON data from a file and set in the HTML element. <\/p>\n
In this tutorial, we will show you how to process ajax request using jQuery and call a PHP script that returns JSON data. The PHP script will fetch data from the MySQL database and returns JSON data<\/b> to Ajax. The returned data is parsed using JavaScript and set values to the specific elements.<\/p>\njQuery AJAX Call to PHP Script with JSON Return<\/h2>\n
For your better understanding, we will fetch user details from the database based on the user ID via Ajax call using jQuery, PHP, and MySQL.<\/p>\n
The Initially, an input box is displayed to provide the user ID whose details you want to retrieve. The “Get Details” button initiates an Ajax request and the respective user details are displayed under the input box.<\/p>\n This PHP script is called by the Ajax request. Based on the user ID the details are fetched from the database using PHP and MySQL. The retrieved data returns as JSON format to the Ajax.<\/p>\n The jQuery ajax is very useful when you want to post or get data from PHP script without page refresh. Generally, you return the string to Ajax call for updating a part of the web <\/p>\n","protected":false},"author":1,"featured_media":2518,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[7],"tags":[28,16,294,19,14],"class_list":["post-2517","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ajax","tag-ajax","tag-jquery","tag-json","tag-mysql","tag-php","cat-7-id","has_thumb"],"yoast_head":"\nusers<\/code> table holds the basic information of the users. Our example script will retrieve user details from this demo (users) table.<\/p>\nCREATE<\/span> TABLE<\/span> `users<\/span>` (\r\n `id`<\/span> int<\/span>(11<\/span>) NOT NULL<\/span> AUTO_INCREMENT,\r\n `name`<\/span> varchar<\/span>(100<\/span>) COLLATE utf8_unicode_ci NOT NULL<\/span>,\r\n `email`<\/span> varchar<\/span>(100<\/span>) COLLATE utf8_unicode_ci NOT NULL<\/span>,\r\n `phone`<\/span> varchar<\/span>(15<\/span>) COLLATE utf8_unicode_ci NOT NULL<\/span>,\r\n `created`<\/span> datetime NOT NULL<\/span>,\r\n `modified`<\/span> datetime NOT NULL<\/span>,\r\n PRIMARY KEY<\/span> (`id`<\/span>)\r\n) ENGINE=<\/span>InnoDB DEFAULT CHARSET=<\/span>utf8 COLLATE=<\/span>utf8_unicode_ci;\r\n<\/pre>\nHTML Code<\/h2>\n
<input<\/span> type<\/span>=\"text\"<\/span> id<\/span>=<\/span>\"user_id\"<\/span> \/>\r\n<input<\/span> type<\/span>=\"button\"<\/span> id<\/span>=<\/span>\"getUser\"<\/span> value<\/span>=\"Get Details\"<\/span>\/>\r\n<div<\/span> class<\/span>=\"user-content\"<\/span> style<\/span>=\"display: none;\"<\/span>>\r\n <h4<\/span>>User Details<\/h4<\/span>>\r\n <p<\/span>>Name: <span<\/span> id<\/span>=<\/span>\"userName\"<\/span>><\/span<\/span>><\/p<\/span>>\r\n <p<\/span>>Email: <span<\/span> id<\/span>=<\/span>\"userEmail\"<\/span>><\/span<\/span>><\/p<\/span>>\r\n <p<\/span>>Phone: <span<\/span> id<\/span>=<\/span>\"userPhone\"<\/span>><\/span<\/span>><\/p<\/span>>\r\n <p<\/span>>Register Date: <span<\/span> id<\/span>=<\/span>\"userCreated\"<\/span>><\/span<\/span>><\/p<\/span>>\r\n<\/div<\/span>>\r\n<\/pre>\nJavaScript Code (jQuery & AJAX)<\/h2>\n
$.ajax()<\/code> method perform an Ajax request and post the user ID to a PHP file to get the user details from the database. If the request succeeds the data returned from the server as the specified format in the dataType<\/code> parameter. In our example script, JSON is specified in dataType<\/code>, the data will be returned as JSON format. The parsed JSON data sets to the respective element content.<\/p>\n<script<\/span>>\r\n$<\/span>(document<\/span>).ready<\/span>(function<\/span>(){\r\n $<\/span>('#getUser<\/span>').on('click'<\/span>,function<\/span>(){\r\n var<\/span> user_id =<\/span> $<\/span>('#user_id<\/span>').val<\/span>();\r\n $<\/span>.ajax<\/span>({\r\n type:'POST'<\/span>,\r\n url:'getData.php'<\/span>,\r\n dataType: \"json\"<\/span>,\r\n data:{user_id:user_id},\r\n success<\/span>:function<\/span>(data){\r\n if<\/span>(data.status<\/span> ==<\/span> 'ok'<\/span>){\r\n $<\/span>('#userName<\/span>').text<\/span>(data.result.name<\/span>);\r\n $<\/span>('#userEmail<\/span>').text<\/span>(data.result.email);\r\n $<\/span>('#userPhone<\/span>').text<\/span>(data.result.phone);\r\n $<\/span>('#userCreated<\/span>').text<\/span>(data.result.created);\r\n $<\/span>('.user-content<\/span>').slideDown<\/span>();\r\n }else<\/span>{\r\n $<\/span>('.user-content<\/span>').slideUp<\/span>();\r\n alert<\/span>(\"User not found...\"<\/span>);\r\n } \r\n }\r\n });\r\n });\r\n});\r\n<\/script<\/span>>\r\n<\/pre>\nPHP Script (getData.php)<\/h2>\n
<?php
<\/span>if(!empty(<\/span>$_POST<\/span>[<\/span>'user_id'<\/span>])){
<\/span>$data <\/span>= array();
<\/span>\/\/database details
<\/span>$dbHost <\/span>= <\/span>'localhost'<\/span>;
<\/span>$dbUsername <\/span>= <\/span>'root'<\/span>;
<\/span>$dbPassword <\/span>= <\/span>'*****'<\/span>;
<\/span>$dbName <\/span>= <\/span>'codexworld'<\/span>;
<\/span>\/\/create connection and select DB
<\/span>$db <\/span>= new <\/span>mysqli<\/span>(<\/span>$dbHost<\/span>, <\/span>$dbUsername<\/span>, <\/span>$dbPassword<\/span>, <\/span>$dbName<\/span>);
if(<\/span>$db<\/span>-><\/span>connect_error<\/span>){
die(<\/span>\"Unable to connect database: \" <\/span>. <\/span>$db<\/span>-><\/span>connect_error<\/span>);
}
<\/span>\/\/get user data from the database
<\/span>$query <\/span>= <\/span>$db<\/span>-><\/span>query<\/span>(<\/span>\"SELECT * FROM users WHERE id = <\/span>{<\/span>$_POST<\/span>[<\/span>'user_id'<\/span>]}<\/span>\"<\/span>);
if(<\/span>$query<\/span>-><\/span>num_rows <\/span>> <\/span>0<\/span>){
<\/span>$userData <\/span>= <\/span>$query<\/span>-><\/span>fetch_assoc<\/span>();
<\/span>$data<\/span>[<\/span>'status'<\/span>] = <\/span>'ok'<\/span>;
<\/span>$data<\/span>[<\/span>'result'<\/span>] = <\/span>$userData<\/span>;
}else{
<\/span>$data<\/span>[<\/span>'status'<\/span>] = <\/span>'err'<\/span>;
<\/span>$data<\/span>[<\/span>'result'<\/span>] = <\/span>''<\/span>;
}
<\/span>\/\/returns data as JSON format
<\/span>echo <\/span>json_encode<\/span>(<\/span>$data<\/span>);
}
<\/span>?><\/span><\/pre>\n","protected":false},"excerpt":{"rendered":"