Analysis and examples of the jQuery $.get() function that is used to make an Ajax request to the server in which we can send data through the GET method.
In it we had previously discussed Ajax in this Javascript framework, mainly to demonstrate how easy it was to make an asynchronous connection to the server using the . We had even gone a bit further, without leaving the facility, implementing a .
In this article we are going to start exploring some other existing functions in jQuery for doing Ajax and some more advanced uses that will allow us to broaden our skills and the type of problems we may face. We’ll start with the $.get() method, which as we’ll see is almost as simple as the already mentioned load() method.
So far, with the load() method, we’ve learned how to make an Ajax request and load the resulting HTML from that request into a page element. The $.get() method, unlike load(), does not dump the result of the request anywhere by default, but simply connects to the server and receives the response. This does not mean that we cannot later dump the result of the request in the HTML of a layer or any other element of the page, but rather that to achieve this, we must specify it in the code of our script. From this we can deduce that $.get() does not have a default behavior (ie, and does nothing fixed with the response of the Ajax request) and therefore, we can program any behavior we want in our applications.
Note: the $.get() method can also be found named jQuery.get() since $ is an abbreviation for the jQuery object.
In this first article we are going to dedicate ourselves to making a list of examples of increasing difficulty with the $.get() method, which will help us to understand how it works. Like many jQuery methods, $.get() varies its behavior depending on the parameters we pass to it.
$.get(URL)
If $.get() is passed a string with a URL, the method makes an Ajax request to that URL, but does nothing with the response it gets from the server.
$.get(“ajax-content.html”);
That is to say, if we execute that previous code, the browser will process the Ajax request of the page “ajax-content.html” and with it it will obtain a response. However, it won’t do anything with that response once it’s received and so we won’t see any output in the browser.
$.get(URL, function)
In this second case, we are passing two parameters, the first the URL of the Ajax request to perform and the second a function with the code to execute when the response is received, which will include all the actions to perform when it is received. In this function, we receive several parameters, the most important being the first, in which we will have a reference to the result of the request made. We see it with an example:
$.get(“ajax-content.html”, function(requestResponse){
alert(RequestResponse);
})
In this case we make a request to the file “ajax-content.html”. Then, when the response is received, the function code will be executed. In the function we receive a “requestResponse” parameter, which will contain the HTML code returned by the server when requesting that page via Ajax. As you can see, in the function we simply display the content of the Request response in an alert box.
That running code can be .
$.get(URL, data, function)
A third use case of this function is to send three parameters, one with the path of the page to request, another with data that would be sent in the URL of the HTTP request (which we will receive on the server through the GET method) and a function to do things when the request has been completed and you have the result.
In this case we have a behavior similar to the previous one, with the particularity that we are sending a series of data to the server, as variables in the URL. Said data is specified from jQuery with object notation.
$.get(“receives-parameters2.php”, {name: “Evandro”, age: “99”}, function(response){
$(“#myparagraph”).html(response);
})
As can be seen, the page receives-parameters2.php is accessed by Ajax and two variables are passed to it by GET, a name and an age. In this case we also have a function to execute actions with the response and we simply dump the response into a page element that has the identifier id=”myparagraph”.
Those variables sent in the HTTP request, as we say, would be picked up in the pages with server-side programming by the GET method. For example, this would be the PHP code needed to receive those variables:
Received the following data:
Name:
Age:
We can see the
$.get(URL, data, function, response_data_type)
This last case of $.get() serves to specify an additional parameter, which is the type of data that is expected to be received as a response from the server. Typically, we get an HTML code from the server, but it could also be an XML, a script or a JSON.
To show this possible call to jQuery.get() we are going to show an example in which we receive data from the server in , which is a type of response widely used in client-side web applications.
In this example we’ve complicated our script a bit, so you can see how with $.get() we can do many different things with the response and not just write it to the page or a dialog box. To do this we simply have to complicate as much as we want the function that receives the response and does things with it. In this case, since we receive a file in JSON notation, we can do different things depending on the content of that JSON.
The following example makes a rudimentary calculation of the final price of a product, which would be the tax base plus VAT. In addition, in this supposed exercise we could have various types of customers, for example Spanish (to whom the VAT tax must be applied) or foreigners, who are exempt from paying such tax.
We have a couple of buttons, with a couple of product cases:
As can be seen, one button has a price for a Spanish customer and another for a Brazilian customer. The functionality of these buttons could be expressed by generating a click event for each of the buttons:
$(“#coniva”).click(function(){
$.get(“receives-parameters-returns-json.php”, {country: “ES”, price: 20}, showsFinalPrice, “json”);
})
$(“#siniva”).click(function(){
$.get(“receives-parameters-returns-json.php”, {country: “BR”, price: 300}, showsFinalPrice, “json”);
})
The detail that we have to fix in this code is that we are sending a last parameter to the $.get() function with the value “json”. With that we indicate that the response from the server is expected with JSON notation. Also, as you can see, the buttons invoke the same receive-parameters-return-json.php page, but different data is passed to the server by GET. There is also a single function “mustraPrecioFinal” that will take care of displaying the final price on the page. We have defined this function separately, with the following code:
function showFinalPrice(response){
$(“#base”).html(“Final price: ” + answer.finalprice);
if (answer.hasiva==”1″){
$(“#base”).css(“background-color”, “#ffcc00”);
}else{
$(“#base”).css(“background-color”, “#cc00ff”);
$(“#base”).append($(‘VAT is not applied for being a foreign customer‘));
}
}
With this function we wanted to demonstrate how different things can be done depending on the response. Specifically, in this example, in the case of being a Spanish or foreign customer, slightly different actions are carried out.
In addition, in the function we receive a “response” parameter. In this case, since what we received is a JSON response, said variable will have different data that we can access as if they were properties of an object. For example, respuesta.preciofinal has the value of total price, once VAT has been applied or not depending on the nationality of the customer. For its part, respuesta.tieneiva helps us to know whether or not to apply VAT to that customer.
We would still have to see the PHP page receives-parameters-returns-json.php, which contains the code to receive the data by GET and generate the appropriate JSON for the response of the Ajax request.
if ($_GET!=”IT”){
echo json_encode(array(“hasiva”=>”0”, “finalprice”=>$_GET));
}else{
echo json_encode(array(“hasiva”=>”1”, “finalprice”=>($_GET * (18 / 100)) + $_GET));
}
?>
This example of Ajax with response in JSON format we can .
In the next article we’ll see how we can apply events to this $.get() method so that we can do things when the request completes, with success or failure.
Facebook Comments
Disqus