Hit enter after type your search item

jQuery get method with 3 demos

The $.get method of jQuery

The jQuery $.get method is used to load data from the server by HTTP GET request asynchronously. The $.get method is the shorthand of main AJAX method that makes it simple to make ajax calls.

The $.get method is the shorthand of main AJAX method that makes it simple to make ajax calls.

You should use $.get method for data that may be cached, Otherwise, use the $.post method.

Syntax of $.get method

This is how you may use the jQuery get method:


 

You may use a URL to specify source or it can be a text file, a script file like PHP, .aspx etc.

In the following part, I will show you examples of using the $.get method to load data from a text file and using a PHP file that connects to a database server. The demo also includes displaying the returned data in div, HTML table etc. elements.

An example of get method to load data from a text file to HTML div

In this example, a text file is created and placed at the same location where I am using this demo source file. The text file contains dummy text.

After calling the $.get jQuery method, the returned data is displayed in an HTML div element. See the example by clicking the link or image below:

jQuery get

See online demo and code

At the click event of button, the $.get method is called where text file is called:


 

The callback function receives returned result if HTTP Get request is successful, and finally, the text file’s data is displayed in a div element by using $.append method.

An example of get with PHP and MySQL database

In this example of get method, a PHP file is called rather a text file. In the PHP file, a script is written to connect to a database and retrieve the table data. After that, an HTML table is created inside that PHP file that is returned as a request in $.get method.

Finally, that returned HTML table is displayed in the <div> selector of the document.

jQuery get PHP MySQL

See online demo and code

Instead of using a button to call the $.get, the method is executed as the demo page loads. The CSS classes for the table are created inside the source file that calls $.get method while these are referred inside the PHP file for demo purpose.

Following jQuery code is used:


 

You can see the complete code with markup and CSS in the demo page.

A demo of sending data in get request

In above examples, I simply executed the get jQuery method without taking any parameter. You may also send data along with request while using the $.get method.

In this example, an HTML dropdown is given with product selection option. After selecting a product, as you click the button “Load Product data”, the $.get method is called.

Inside the get method, a PHP file is called where the selected product is also sent along with the request. In the PHP file, an SQL query is used after establishing the connection with the database to retrieve that products’ information from the MySQL table.

Finally, the information is displayed in an HTML table, just like the above example.

jQuery get send data

See online demo and code

This is how it is done:

First, the $.get method is executed at the click event of button:


 

Inside the getsingleprod.php file, the $_GET array is used to receive the sent data:


 

After that, DB connection is established and an SQL query is written:


 

If product is found in the table, the markup to display that product is also written in PHP file:


 

The CSS classes of the table are inside the source file that calls $.get method. Find the complete code of both files in the demo page.

This div height required for enabling the sticky sidebar