How To build jquery ajax with php

Submitted by thusitcp on Thursday, October 9, 2014 - 16:20.

Language

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

CREATE TABLE `register` (
  `user_id` INT(11) NOT NULL AUTO_INCREMENT,
  `firstname` VARCHAR(100) NOT NULL,
  `lastname` VARCHAR(100) NOT NULL,
  `username` VARCHAR(100) NOT NULL,
  `password` VARCHAR(15) NOT NULL,
  `email` VARCHAR(100) NOT NULL,
  `contact` VARCHAR(20) NOT NULL,
  PRIMARY KEY (`user_id`)
)

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

<!DOCTYPE html>
<html lang="en">
 
<head>
	<meta charset="utf-8"/>
	<title>Admin Panel</title>	
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">        
	<script src="//code.jquery.com/jquery-1.10.2.js"></script>       
	<script src="js/hideshow.js" type="text/javascript"></script>
	<script src="js/jquery.tablesorter.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="js/jquery.equalHeight.js"></script>
        <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.

<head>      
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="admin_style.css" type="text/css" media="screen" />
</head>
 
<div class="">
    <form id="frmuser" name="frmuser" action="register_formaction.php" method="post">
        <table class="">
            <tr>
                <td class="lab"><label>First name:</label></td>
                <td class="lab1">
                    <input type="text" name="fname" size="30"></td>
                </td>
            </tr>
            <tr>
                <td class="lab"><label>Last name:</label></td>
                <td class="lab1">
                    <input type="text" name="lname" size="30"></td>
                </td>
            </tr>
            <tr>
                <td class="lab"><label>Username:</label></td>
                <td class="lab1">
                    <input type="text" name="uname" size="30"></td>
                </td>
            </tr>
            <tr>
                <td class="lab"><label>Password:</label></td>
                <td class="lab1">
                    <input type="password" name="pass" size="30"></td>
                </td>
            </tr>
            <tr>
                <td class="lab"><label>Email:</label></td>
                <td class="lab1">
                    <input type="email" name="email" size="30"></td>
                </td>
            </tr>
            <tr>
                <td class="lab"><label>Contact:</label></td>
                <td class="lab1">
                    <input type="text" name="contact" size="30"></td>
                </td>
            </tr>           
            <tr>
                <td colspan="2" class="tab-log">
                    <input type="submit" id="insertuser" class="sub-form" name="submit" value="Add">
                </td>
            </tr>
        </table>
        <br />
    </form>
 
 
</div>

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

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

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.

$(document).on('click',"#insertuser", function(event){
 
       event.preventDefault();
 
         var formData = $("#frmuser").serialize();
 
 
          $.ajax({
                    type: "POST",
                    url: "register_formaction.php",
                    data: formData, 
                   // contentType: false,
                  // processData: false,
                   dataType: 'JSON',
                    success: function(response) {
 
                        console.log(response.msg);
 
                        if(response.status == true){
 
 
 
                              $('#emessageerr').hide();
                              $('#dmessage').show();
                              $('#gmsg').attr('class','alert alert-success');
                              $('#gmsg').html(response.msg);
                                // alert(response.msg);
                                 dialog_newuser.dialog('close');
                            }
                            else{
                               alert(response.msg);
                                $('#dmessage').hide();
                                $('#emessageerr').show();
                             // $('#ghmsgerr').switchClass('alert alert-danger','alert alert-success');
                              $('#ghmsgerr').html(response.msg);
 
 
                            }
                    },
                     error: function(response) {
 
                          alert(response.msg);
                              $('#dmessage').hide();
                              $('#emessageerr').show();
                             // $('#ghmsgerr').switchClass('alert alert-danger','alert alert-success');
                              $('#ghmsgerr').html(response.msg);
 
 
                        console.log(response. responseText);
 
                     }
                });         
 
     });

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

$response = array();
$response['msg']= "";
$response['status']= FALSE;

then we are creating our add method

<?php                                    
 
include('connect.php');
 
$response = array();
$response['msg']= "";
$response['status']= FALSE;
 
if(isset($_POST['fname'])){
 
    $firstname = $_POST['fname'];
    $lastname = $_POST['lname'];
    $username = $_POST['uname'];
    $password = $_POST['pass'];
    $useremail = $_POST['email'];
    $usercontact = $_POST['contact'];
 
    if($firstname == '' )
    {
        $response['msg']= "Firstname is empty";
        $response['status']= FALSE;
    }
    else if($lastname == '')
    {
        $response['msg']= "Lastname is empty";
        $response['status']= FALSE;        
    }
    else if($username == '')
    {
        $response['msg']= "Username is empty";
        $response['status']= FALSE;        
    }
    else if($password == '')
    {
        $response['msg']= "Password is empty";
        $response['status']= FALSE;        
    }
    else if($useremail == '')
    {
        $response['msg']= "Usermail is empty";
        $response['status']= FALSE;        
    }
    else if($usercontact == '')
    {
        $response['msg']= "Contact is empty";
        $response['status']= FALSE;        
    }    
    else 
    {
 
        $passwordmd5 = md5($password);
        $insert_query = "insert into register(firstname, lastname, username, password, email, contact) values('$firstname', '$lastname',
       '$username', '$passwordmd5', '$useremail', '$usercontact')";
 
              if(mysql_query($insert_query))
              {
                           $response['msg']= "Susscessfully Inserted";
                            $response['status']= TRUE;
              }  
              else{
 
                            $response['msg']= "Insertion error";
                            $response['status']= FALSE;
              }
 
    }
 
 
 
 
}
else{
                $response['msg']= "Invalied post";
                  $response['status']= FALSE;
}
 
echo json_encode($response);
 
?>

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

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

How To build jquery ajax with php

Language

Tags

Comments

wheres the rest of it??

Add new comment