Google Ads

Build Jquery Ajax v1 with PHP Script


Build Jquery Ajax v1 with PHP Script

This tutorial describes how to insert, update, and delete method using php/ajax. In this tutorial I am creating small project for user account creation. That will guide you how to process server side script using Ajax without refreshing the page.

What is Ajax?

Ajax stands for Asynchronous JavaScript and XML. It is a technology to use communicates to sever and load severs side content without refreshing the page. Ajax is an efficient way for a web application to handle user interactions with a web page – a way that reduces the need to do a page refresh or full page reload for every user interaction. For the beginner better to used query ajax method which is simplified usage of technology. You can find jquery ajax documentation here http://api.jquery.com/jquery.ajax/

To register users we are going to used register table and it has following structure

 

 
 
  1. This tutorial describes how to insert, update, and delete method using php/ajax. In this tutorial I am creating small project for user account creation. That will guide you how to process server side script using Ajax without refreshing the page.
  2. What is Ajax?
  3. Ajax stands for Asynchronous JavaScript and XML. It is a technology to use communicates to sever and load severs side content without refreshing the page. Ajax is an efficient way for a web application to handle user interactions with a web page - a way that reduces the need to do a page refresh or full page reload for every user interaction. For the beginner better to used query ajax method which is simplified usage of technology. You can find jquery ajax documentation here http://api.jquery.com/jquery.ajax/
  4. To register users we are going to used register table and it has following structure

 

Then we need to create a html page and add jquery library to code. For easy maintain purpose I break up page and put in to top part as header file. Here is its code

 

 
 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.       <meta charset="utf-8"/>
  5.       <title>Admin Panel</title>      
  6. <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
  7.       <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  8.       <script src="js/hideshow.js" type="text/javascript"></script>
  9.       <script src="js/jquery.tablesorter.min.js" type="text/javascript"></script>
  10.       <script type="text/javascript" src="js/jquery.equalHeight.js"></script>
  11. <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

 

After creating page we need to code for user registration form that’s we are going to load by ajax in to jquery dialog box.

 

 
 
  1. <head>
  2. <link rel="stylesheet" href="<a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  3. " rel="nofollow">https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  4. </a> <link rel="stylesheet" href="<a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
  5. " rel="nofollow">https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min....</a> <script src="<a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  6. " rel="nofollow">https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></s...</a> <link rel="stylesheet" href="admin_style.css" type="text/css" media="screen" />
  7. </head>
  8. <div class="">
  9. <form id="frmuser" name="frmuser" action="register_formaction.php" method="post">
  10. <table class="">
  11. <tr>
  12. <td class="lab"><label>First name:</label></td>
  13. <td class="lab1">
  14. <input type="text" name="fname" size="30"></td>
  15. </td>
  16. </tr>
  17. <tr>
  18. <td class="lab"><label>Last name:</label></td>
  19. <td class="lab1">
  20. <input type="text" name="lname" size="30"></td>
  21. </td>
  22. </tr>
  23. <tr>
  24. <td class="lab"><label>Username:</label></td>
  25. <td class="lab1">
  26. <input type="text" name="uname" size="30"></td>
  27. </td>
  28. </tr>
  29. <tr>
  30. <td class="lab"><label>Password:</label></td>
  31. <td class="lab1">
  32. <input type="password" name="pass" size="30"></td>
  33. </td>
  34. </tr>
  35. <tr>
  36. <td class="lab"><label>Email:</label></td>
  37. <td class="lab1">
  38. <input type="email" name="email" size="30"></td>
  39. </td>
  40. </tr>
  41. <tr>
  42. <td class="lab"><label>Contact:</label></td>
  43. <td class="lab1">
  44. <input type="text" name="contact" size="30"></td>
  45. </td>
  46. </tr>
  47. <tr>
  48. <td colspan="2" class="tab-log">
  49. <input type="submit" id="insertuser" class="sub-form" name="submit" value="Add">
  50. </td>
  51. </tr>
  52. </table>
  53. <br />
  54. </form>
  55. </div>

 

After creating form then we need to load content to Jquery dialog box when user cliqued add button

 

 
 
  1. $("#btnnewuser").on( "click", function(e) {
  2. dialog_newuser = $('<div></div>').load('register_form.php').dialog({
  3. autoOpen: false,
  4. title:'Add new user',
  5. width: 600,
  6. height: 400
  7. });
  8. dialog_newuser.dialog('open');
  9. });

 

Then we are going to create our Ajax add method. Usually AJAX can be pass two ways. Using url with some setting or as a JSON object.

 

 
 
  1. $(document).on('click',"#insertuser", function(event){
  2. event.preventDefault();
  3. var formData = $("#frmuser").serialize();
  4. $.ajax({
  5. type: "POST",
  6. url: "register_formaction.php",
  7. data: formData,
  8. // contentType: false,
  9. // processData: false,
  10. dataType: 'JSON',
  11. success: function(response) {
  12. console.log(response.msg);
  13. if(response.status == true){
  14. $('#emessageerr').hide();
  15. $('#dmessage').show();
  16. $('#gmsg').attr('class','alert alert-success');
  17. $('#gmsg').html(response.msg);
  18. // alert(response.msg);
  19. dialog_newuser.dialog('close');
  20. }
  21. else{
  22. alert(response.msg);
  23. $('#dmessage').hide();
  24. $('#emessageerr').show();
  25. // $('#ghmsgerr').switchClass('alert alert-danger','alert alert-success');
  26. $('#ghmsgerr').html(response.msg);
  27. }
  28. },
  29. error: function(response) {
  30. alert(response.msg);
  31. $('#dmessage').hide();
  32. $('#emessageerr').show();
  33. // $('#ghmsgerr').switchClass('alert alert-danger','alert alert-success');
  34. $('#ghmsgerr').html(response.msg);
  35. console.log(response. responseText);
  36. }
  37. });
  38. });

 

Then we need to code our php add method with proper error message handling. So we need to track all the errors happening on server to client side. we need to implement formal message handling mechanism. In our code we are using response array with proper messaging. its look like follows

 

 
 
  1. $response = array();
  2. $response['msg']= "";
  3. $response['status']= FALSE;

 

then we are creating our add method

 

 
 
  1. <?php
  2. include('connect.php');
  3. $response = array();
  4. $response['msg']= "";
  5. $response['status']= FALSE;
  6. if(isset($_POST['fname'])){
  7. $firstname = $_POST['fname'];
  8. $lastname = $_POST['lname'];
  9. $username = $_POST['uname'];
  10. $password = $_POST['pass'];
  11. $useremail = $_POST['email'];
  12. $usercontact = $_POST['contact'];
  13. if($firstname == '' )
  14. {
  15. $response['msg']= "Firstname is empty";
  16. $response['status']= FALSE;
  17. }
  18. else if($lastname == '')
  19. {
  20. $response['msg']= "Lastname is empty";
  21. $response['status']= FALSE;
  22. }
  23. else if($username == '')
  24. {
  25. $response['msg']= "Username is empty";
  26. $response['status']= FALSE;
  27. }
  28. else if($password == '')
  29. {
  30. $response['msg']= "Password is empty";
  31. $response['status']= FALSE;
  32. }
  33. else if($useremail == '')
  34. {
  35. $response['msg']= "Usermail is empty";
  36. $response['status']= FALSE;
  37. }
  38. else if($usercontact == '')
  39. {
  40. $response['msg']= "Contact is empty";
  41. $response['status']= FALSE;
  42. }
  43. else
  44. {
  45. $passwordmd5 = md5($password);
  46. $insert_query = "insert into register(firstname, lastname, username, password, email, contact) values('$firstname', '$lastname',
  47. '$username', '$passwordmd5', '$useremail', '$usercontact')";
  48. if(mysql_query($insert_query))
  49. {
  50. $response['msg']= "Susscessfully Inserted";
  51. $response['status']= TRUE;
  52. }
  53. else{
  54. $response['msg']= "Insertion error";
  55. $response['status']= FALSE;
  56. }
  57. }
  58. }
  59. else{
  60. $response['msg']= "Invalied post";
  61. $response['status']= FALSE;
  62. }
  63. echo json_encode($response);
  64. ?>

 

sample code contained number of ajax usage with several method on header file. This will be very useful for beginner.

 

 

 


Related Post

Q2APHP PRO v2.0.2 – q&a social network ... Q2APHP PRO v2.0.2 - q&a social networkQ2APHP PRO v2.0.2 - q&a social networkQ2APHP PRO – ask and answer application Database and modifications are n...
Blockchain Bitcoin Payments PHP Script Blockchain Bitcoin Payments PHP Script This simple script will help you get started with ease and receive bitcoin payments from users/members at no...
Facebook Search Engine – Lead Collector & S... Facebook Search Engine – Lead Collector & SaaSFacebook Search Engine – Lead Collector & SaaSA powerful facebook scraper to get facebook data such ...
Sngine v2.5.5 – The Ultimate PHP Social Netw... Sngine v2.5.5 - The Ultimate PHP Social Network Platform - nulled PHP Script Sngine is a PHP Social Network Platform is the best way to create your...
Seo Panel v3.15.0 PHP Script Seo Panel v3.15.0 PHP Script Seo Panel A complete open source seo control panel for managing search engine optimization of your websites. Seo Panel...

Have any Question or Comment?

Leave a Reply

Your email address will not be published. Required fields are marked *

"