Sending data by jQuery post method
You may send data along with calling a script file like PHP, JSP, ASPX etc. or text file as well while using the $.post method of jQuery.
As you make the request in post jQuery method, the data can be sent as follows:
$.post("post.php", { ProductName: prodname, productid: prodID },function(success){
$(selector).append(“returned_data”);
});
After giving the source file, post.php in that case, you can specify one or more parameters in curly brackets that are separated by commas.
You may use this data for useful purposes, for example, a web page is taking the user id and password or product id or name. After selecting or entering the information as a button is pressed, you may send this data which is caught by jQuery post method.
The script file may contain the DB script that may use this entered information to query data from the database server like MySQL, SQL server etc. Finally, you can present the returned data without refreshing the web browser.
I will show you a demo to set up now.
A demo to send data with request in $.post method
I will use the same scenario as I just mentioned earlier. A select dropdown is given in a web page to select a product name. After selecting a product, as the button is clicked to load data for that product, the $.post jQuery method will be called to retrieve information from the MySQL database, without reloading the web page.
See a demo online first which is followed by description:
See online demo and code
As you click the button, the code inside the click event executes where selected value is captured:
var prodname = $('#selproduct :selected').text();
The next line is using the $.post method where postsingleprod.php is specified along with sending that captured value from the dropdown.
$.post("postsingleprod.php", { ProductName: prodname },function(postresult){
You can see the ProductName is used there that is sent to the postsingleprod.php page.
In the postsingleprod.php script file, first of all, that sent value is assigned to a PHP variable by using the PHP $_POST array, as such, the jQuery post method is used to request via HTTP.
This line is used in postsingleprod.php to get the selected value:
$productname = $_POST['ProductName'];
After that, a MySQL database connection is established. In the SQL query, I used that parameter to fetch row from the tbl_products table that contains the product information:
$sql_statemanet = "select * from tbl_products where Product_Name = '" .$productname ."'";
If row is found it will be displayed in an HTML table, which markup is also specified in the postsingleprod.php file:
echo "<table class='demotbl'>"; echo "<tr> <th>Product ID</th> <th>Product </th> <th>Quality </th> <th>Quantity </th></tr>";
The CSS of the HTML table is specified in the calling file where $.post method is used. See the <style> section under the <head> tag.
You can see the complete PHP and jQuery code in the demo page code section here.