How to Build Ajax Pages using jQuery

In this post, we’ll look at how to build Ajax pages using jQuery. You can use Ajax in five different ways with the jQuery library:

load.

$ .post

$ .get

$ .getJSON

$ .getScript

Method of loading

The load function is one of the simplest and most used ways to deal with Ajax in jQuery. This function uses Ajax to load the content of a page.

Example

In this post, we’ll look at how to use jQuery to create Ajax pages.

You can use Ajax in five different ways with the jQuery library:

$ .post

$ .get

$ .getJSON

$ .getScript

Method of loading

The load function is one of the simplest and most used ways to deal with Ajax in jQuery.

<script>
$('#load').click(function(){
var loading = '<img src="loading.gif" />';
$('.result').html(loading).load('getName.php?id=2');
});
</script>
<div></div>
<button id="load">Load</button>

The above code displays a loading picture in the div when the key is hit, followed by the information received from the server and placed in the div tag. Using this function, we can only send information to the server as a GET request.

A post function is $.Post. Send a POST request to the server. When sending data to a server, POST is occasionally required. To do this, we use the $.post method in jQuery.

$('#load').click(function(){
var loading = '<img src="loading.gif" />';
$('.result).html(loading);
$.post(
'getName.php' ,
{id: '2'} ,
function(data){
$('.result).html(data);
}
, 'html');
});

There are four parameters in the post method. The first parameter is the name of the page to which the request will be sent. The values we send via POST should be the second parameter. JSON format should be used to send these values.

When the request is successfully sent and received by the server, the third parameter is a function that is run. You can see that this function has an argument (data), and the values received by the server are stored in the data variable.

The fourth argument sets the format in which data will be received. In the preceding example, we specified html as the data-receiving format. We do the following when the values supplied from the server are in json format:

$('#load').click(function(){
var loading = '<img src="loading.gif" />';
$('.result).html(loading);
$.post(
'getName.php' ,
{id: '2'} ,
function(data){
alert('Name : '+data.name+ ' City: '+data.city);
}
, 'json');
});

And on the server side:

if(isset($_POST['id']))
echo json_encode(array('name'=>'saeed','city'=>'mashhad'));

Before returning, the json encode method accepts an array as an argument and converts it to json format. Use the $.Get function to send values via GET. The values are sent to the server via the GET method, which is the same as the $.post method. This function is more adaptable than the load function since it allows us to select the type of data we want to receive.

$('#load').click(function(){
var loading = '<img src="loading.gif" />';
$('.result).html(loading);
$.get(
'getName.php' ,
{id: '2'} ,
function(data){
alert('Name : '+data.name+ ' City: '+data.city);
}
, 'json');
});

$.GetJSON is a function that returns a JSON object. JSON data is received from the server. This method delivers data to the server in JSON and receives data in JSON from the server.

$.getJSON('getJSON.php'  , { id : 2} ,function(data){
alert(data.name);
});

As a GET, this function sends data to the server. It functions similarly to the $.get method, with the exception that the $.get function is more versatile. $.GetScript is a function that returns a script. Obtain a JavaScript file from the server and upload it. We can use this function to load a file containing JavaScript commands. There are no more than two parameters for this function. The file path is the first parameter, and the second parameter is the function that is called when the request is complete:

//    $.getScript()
var scriptUrl = "ajax/script.php";
$("#getScript").click(function(){
$("#result").html(ajax_load);
$.getScript(scriptUrl, function(){
$("#result").html("");
});
});

Finally, $.ajax is a new technique to construct Ajax pages using jQuery that adds more functionality. Working with this function, according to the jQuery site, is a little complicated, but it comes with features like error management, before send, cache, and so on.

%d bloggers like this: