What is AJAX ?

AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS and Java Script.

Conventional web application trasmit information to and from the sever using synchronous requests. This means you fill out a form, hit submit, and get directed to a new page with new information from the server.

With AJAX when submit is pressed, JavaScript will make a request to the server, interpret the results and update the current screen. In the purest sense, the user would Fknow that anything was even transmitted to the server.

Insert and view the data from database without refresh using PHP, MySql, AJax and JQuery. this concept is mostly searching by everyone, here i’m going to show you that, in an usual insert and view take page refresh. so the loading will make page loading delay, so here i’m going use AJAX for make that insert and view without refreshing the page.

for that we need to make three file to clear explanation. let see those files.

  • 1 connection.php
  • 2 insert_html.php
  • 3 insert_php.php
  • 4 script.js

The above three files details below here

connection.php

in this file write mysql connection code

 

 $conn = mysql_connect('localhost','root','') or die (mysql_error);
 $db=mysql_select_db('database_name', $conn) or die (mysql_error);

insert_html.php

this file contain simple html form that submit using ajax
now create a form that contain the user First Name , Last Name or email
and save button

<h1>Fill Your Detail</h1>
<hr />

<form>
First Name <input name="fname" type="text" />
Last Name <input name="lname" type="text" />
Email Name <input name="fname" type="text" />
<input name="save" type="submit" value="Save" />
</form>

insert_php.php

So now your client side script is ready. Now we have to write our server side script which will fetch first name,last name and email from the ‘FORM’ and will insert into database Put the following code into “insert_php.php” file

 

include("connection.php");
$fname= $_POST['fname'];
$email= $_POST['email'];
$lname= $_POST['lname'];

if(mysql_query("INSERT INTO user(fname,lname,email) VALUES('$fname','$lname','$email')"))
 echo "Success";
else
 echo "Error";

script.js

You need to first reference jQuery library before using any jQuery functions and methods

 
You can directly download jQuery mew released version library file from http://jquery.com/download/ website and save it in your server and use that path to reference jQuery library in html file using script tag.
2 : It is a simplest method. You just need to copy the url of jQuery library (latest version) from jQuery CDN (.i.e from http://code.jquery.com/) and use that url in the script tag of the html page as shown below.

 <script src="http://code.jquery.com/jquery-1.11.0.min.js"> </script>  
Create form submit event and send form data using ajax
 $("form").submit(function(){
  var formdata = $(this).serialize();
  $.ajax({
   url:'insert_php.php',
   type'POST',
   data:formdata,
   success:function(message){
    alert(message);
   }
  });
  return false;
 });
.serialize()

The serialize() method creates a URL encoded text string by serializing form values.

You can select one or more form elements (like input and/or text area), or the form element itself.

The serialized values can be used in the URL query string when making an AJAX request.

Read More ..

Leave a Reply