What is Ajax? How to use it into Project with Basic Examples?

In this tutorial, We are going to describe you about Ajax and JQuery Details. like what is Ajax and how to use it into our projects.

Full form of Ajax :- Asynchronous JavaScript and XML
Ajax is used for loading data into the background and append on the webpage without reloading the web page.
Now a days, Every Web-Application is using Ajax like:- Google Map for displaying maps, Facebook, YouTube, Gmail and others.

What is JQuery and its used?
JQuery provides the methods to Ajax functionality and with the help of Ajax and JQuery, We can send and receive the text, HTML, JSON, XML using both GET and POST methods.

we can use this directly from the Google and we can save it into the folder too.
Now, How to start JQuery basics after adding the JQuery file linking.

1). First Syntax: - 

$(document).ready(function(){
 
// your function will take here.
 
});

This is the basic syntax for understanding JQuery and function will execute once when the page is loaded.

2. Notations :

In the above example, we used id = "button" - In JQuery we use # sign and for class = "form1" as . (dot) sign.

3. Basic Function in JQuery: -

$(".form1").submit(function(){
 
// This form will submit when form will submit. Then all the values will automatically submit into the associated fields.
 
});

$("#button1").click function(){
 
// In this Code will execute after clicking trigger button.
 
});

4. How to get value from the text box and other fields :-

$("#textbox_id").val();

This syntax will retrieve the value from the input field.

5. How to get all form values :-

If we are getting value from the one field then we have to use .val() but if we are fetching multiple values from the form then we have to use.

$("#form1").serialize();

 .serialize() :  With the help of serialize() function we get all the values in serial ways with out missing any field value.

$.ajax({
        type:"POST",
        url:"php_url_here.php",
        data:data,
 
        success:function(data)
        {
          $("#result_div_here").html(data);
        }
});
return false;

 Now, We are using all the syntax within one form :-

 
// ajax_response.php file contain ==>
 
";
	echo $country;
 
}
?>

If you face any difficulty for using it then feel free to contact us using contact us form and don't forget to send feedback.