{"id":207,"date":"2012-04-28T17:27:53","date_gmt":"2012-04-28T09:27:53","guid":{"rendered":"https:\/\/www.techcoil.com\/blog\/?p=207"},"modified":"2018-09-03T22:05:09","modified_gmt":"2018-09-03T14:05:09","slug":"how-to-send-http-post-requests-and-http-get-requests-using-jquery","status":"publish","type":"post","link":"https:\/\/www.techcoil.com\/blog\/how-to-send-http-post-requests-and-http-get-requests-using-jquery\/","title":{"rendered":"How to send HTTP post requests and HTTP get requests using jQuery"},"content":{"rendered":"

This was a proof of concept to try out jQuery's ajax features. A<\/strong>synchronus J<\/strong>avascript A<\/strong>nd X<\/strong>ML is a way for avoiding unnecessary refresh of the entire web page. When used properly, it can enhance user experience for your website, especially when you have lots of images on your page which does not change often across different pages.<\/p>\n

This proof of concept was based on jQuery version 1.7.1<\/a><\/strong>.<\/p>\n

A sample scenario<\/h3>\n

Let's create a scenario to demonstrate the use of jQuery AJAX facilities. Suppose we have two php scripts. One process variables sent by the client via HTTP post while the other process variables sent by the client via HTTP get.<\/p>\n

Let's name the first script as postDataHandler.php<\/code>; the second as getDataHandler.php<\/code>.<\/p>\n

The server script - postDataHandler.php: <\/h4>\n
\r\nResults from postDataHandler.php:\r\n<br\/>\r\n<?php\r\n$number = isset($_POST['number']) ? $_POST['number'] : '';\r\nif (is_numeric($number)) {\r\n    if ($number % 2 == 0) {\r\n        echo 'The number is even.';\r\n    }\r\n    else {\r\n        echo 'The number is odd.';\r\n    } \/\/ end if\r\n}\r\nelse {\r\n    echo 'You did not enter a number. Please enter a number.';\r\n} \/\/ end if\r\n?>\r\n<\/pre>\n
In postDataHandler.php<\/code>, we output a string that indicates the identity of the processing script. We then look for a post variable - number<\/strong> in the predefined variable, $_POST<\/code>, that stores post data. <\/p>\n
We then check whether a number is provided. If provided, we check whether the number is odd or even and prints the result. <\/p>\n
If a number is not provided, we ask for a number.<\/p>\n
The server script - getDataHandler.php: <\/h4>\n
\r\nResults from getDataHandler.php:\r\n<br\/>\r\n<?php\r\n$number = isset($_GET['number']) ? $_GET['number'] : '';\r\nif (is_numeric($number)) {\r\n    if ($number < 0) {\r\n        echo 'The number is negative.';\r\n    }\r\n    else if ($number > 0){\r\n        echo 'The number is positive.';\r\n    }\r\n    else {\r\n        echo 'The number is neither positive nor negative. It is zero.';\r\n    } \/\/ end if\r\n}\r\nelse {\r\n    echo 'You did not enter a number. Please enter a number.';\r\n} \/\/ end if\r\n?>\r\n<\/pre>\n
In getDataHandler.php<\/code>, we output a string that indicates the identity of the processing script. We then look for a query string variable - number<\/strong> in the predefined variable, $_GET<\/code>, that stores query string data.<\/p>\n
We first check whether a number is provided. If a number is provided, we check whether it is negative, positive or is zero and outputs the result.<\/p>\n
If a number is not provided, we ask for a number.<\/p>\n
The HTML code for the sample scenario<\/h3>\n
\r\n<div id="contentLink">\r\n    <a id="checkWhetherNumberIsOdd" href="#">\r\n        Check if number is odd or even.\r\n    <\/a>\r\n    <br\/>\r\n    <a id="checkWhetherNumberIsNegative" href="#">\r\n        Check if number is positive or negative.\r\n    <\/a>\r\n<\/div>\r\n<label for="numberTextField">Number: <\/label>\r\n<input id = "numberTextField" type="text"\/>\r\n<hr\/>\r\n<div id="contentBlock">\r\n<\/div>\r\n<\/pre>\n
The HTML code renders four main elements on screen that will be involved in the demonstration:<\/p>\n
    \n
  1. A link that will initiate a HTTP post.<\/li>\n
  2. A link that will initiate a HTTP get.<\/li>\n
  3. A text field for user input.<\/li>\n
  4. A section that will display the result from the server scripts.<\/li>\n<\/ol>\n
    All four are given a unique id each to facilitate DOM selection by the jQuery counterpart.<\/p>\n
    The jQuery code to perform HTTP get and HTTP post<\/h3>\n
    \r\n$(document).ready(\r\n    \r\n    function () {\r\n    $('#checkWhetherNumberIsOdd').click(\r\n        function(event) {\r\n            event.preventDefault();\r\n            $.post('postDataHandler.php'\r\n                 , {number: $('#numberTextField').val()}\r\n                 , dataReady);\r\n        }\r\n    );\r\n    \r\n    $('#checkWhetherNumberIsNegative').click(\r\n        function(event) {\r\n            event.preventDefault();\r\n            $.get('getDataHandler.php'\r\n                   , {number: $('#numberTextField').val()}\r\n                   , dataReady); \r\n        } \/\/ end function(event)\r\n    ); \/\/ end $(document).ready\r\n    \r\n    function dataReady(data) {\r\n        $('#contentBlock').html(data);\r\n    } \/\/ end function dataReady(data)\r\n    \r\n});\r\n<\/pre>\n
    When the document is ready, a click handler is added to each of the two links.<\/p>\n
    Inside the click handler for checkWhetherNumberIsOdd<\/h4>\n
    A call to event.preventDefault<\/code> prevents clicks on the \"Check whether number is odd or even\" link from initiating a full refresh of the web page. <\/p>\n
    We then call $.post<\/code><\/a> to send a HTTP post request to postDataHandler.php<\/code>. There are three arguments supplied to the $.post<\/code> function:<\/p>\n
      \n
    1. The url to the server endpoint which will handle the HTTP post request, which in this case is postDataHandler.php<\/code>.<\/li>\n
    2. A javascript object which contains a number<\/code> property with the user input from numberTextField<\/code> as its value.<\/li>\n
    3. The dataReady function which will look for contentBlock<\/code> and set its content to the content of the HTTP response from the postDataHandler.php<\/code>.<\/li>\n<\/ol>\n
      Inside the click handler for checkWhetherNumberIsNegative<\/h4>\n
      The logic in the click handler for checkWhetherNumberIsNegative<\/code> is similar to the logic checkWhetherNumberIsOdd<\/code>.<\/p>\n
      We call event.preventDefault to prevent clicks on \"Check if number is positive or negative.\" from initiating a full refresh of the web page.<\/p>\n
      However, we call $.get<\/code><\/a> instead of $.post<\/code> to send a HTTP get request to getDataHandler.php<\/code>. <\/p>\n
      The three arguments supplied to the $.get function is similar to $.post:<\/p>\n
        \n
      1. The url to the server endpoint which will handle the HTTP post request, which in this case is getDataHandler.php<\/code>.<\/li>\n
      2. A javascript object which contains a number<\/code> property with the user input from numberTextField<\/code> as its value.<\/li>\n
      3. The dataReady function which will look for contentBlock<\/code> and set its content to the content of the HTTP response from the getDataHandler.php<\/code>.<\/li>\n<\/ol>\n
        Wait! How about cases when the server scripts are not contactable?<\/h3>\n
        There may probably be situations when the scripts does not execute correctly, or in HTTP taxomony, does not send back a HTTP response with status of success 2xx. In such situations, nothing will be populated by the jQuery codes in contentBlock<\/code>.<\/p>\n
        But what if we want to notify our users of such situations from our scripts? Yes we can do that. Since this proof of concept is based on jQuery 1.7.1, we can attach an event handler to output a notification to our users when failures occurred. The event handler can be attached to the $.post or $.get functions by chaining .error<\/a> at the back:<\/p>\n
        \r\n$.post('postDataHandler.php'\r\n     , {number: $('#numberTextField').val()}\r\n     , dataReady).error(function () {\r\n        alert('An error had occurred while checking if number is odd or even.');\r\n     });\r\n<\/pre>\n
        Related posts<\/h3>\n