jQuery post: 2 examples to learn AJAX post method

jQuery Post Method

The jQuery post method ($.post(url)) loads data from the server using HTTP request. As mentioned in the jQuery $.ajax chapter, this is a short form of $.ajax method.

See post example with text file

The URL part is where a page or file name e.g. text file may be specified. The URL may be a .php or .aspx or another file that communicates with a database to return database’s data. This data can be displayed in the web document to the specified HTML elements.

The jQuery ajax post syntax below shows how URL / server location will be specified along with the sent data and managing returned data as per HTTP request.

See post example with PHP file

Both of these examples are explained below!

How to use the post jQuery method

Following is the syntax of ajax post method:

$.post( url, [data], [callback function], [type] )

Where

URL is a string, specifying a server to which request is sent. This is a required parameter of post method.

data: post data to send to the server along with HTTP request. For example, data to be used to query user id/password from the database server. For which, the script may be written in the specified URL. This is an optional parameter of post method.

callback function: Optional parameter. If a request is successful in post method, this function will execute if given. It also contains returned data from the server. The other parameters in this call function are:

Callbackfunction(data, status, xhr)

Where

  • Data = returned data from the server.
  • Status = returns request status i.e. success, error, timeout, notmodified.
  • xhr= it contains XMLHttpRequest object. In a case of Internet Explorer, it defaults to ActiveXObject. Otherwise XMLHttpRequest.
  • dataType: It specifies the type of returned data from the server to a callback function. The returned data in post function may be in these forms:  text, HTML, script, XML, JSON, JSONP.

jQuery ajax post example

Following example shows how to use the post method in jQuery. The simple ajax post example loads a text file by using post method which is placed in the same directory as the source file that calls it. After loading, as the button is clicked, it will display loaded data from the text file to postrequest Div.

See demo by clicking the link below:

jQuery post

Experience this example online



A $.post() with PHP file example

The following example uses two text boxes to send data. The text boxes are name and location. After entering the text and clicking the button, the values will be assigned to the variables in jQuery.

As you click the button, the jQuery $.post method will call URL= post_test.php file. This will receive sent parameters and returns the output string.

Post_test.php file is placed at same location as our HTML file where $.post() method is used.

The returned data will be shown in a div element if the jQuery AJAX post call is successful. See the example online by clicking the link below:

jQuery post PHP

Experience this example online

First post_test.php code



HTML file using jQuery post method



Useful ReadingjQuery $.AJAX


Was this article helpful?

Related Articles

Leave A Comment?