jQuery Ajax Post Data Example
2016-05-05 16:30
666 查看
http://www.formget.com/jquery-post-data/
jQuery Ajax Post Data Example
Fugo Of FormGet
jQuery $.post() method is used to request data from a webpage and to display the returned result (sent from requested page) on to that webpage from where the request has been sent without page refresh.
$.post() method sends request along with some data using an HTTP POST request.
Under this, a request is send to a webpage (here it is jquery_post.php) from another page (say jquery_send.php) using syntax :
Syntax:
$.post( URL, data, callback);
Parameters:
URL
The URL parameter is defined for the URL of requested page which may communicate with database to return results.
$.post("jquery_post.php",data,callback);
data
The data parameter is defined to send some data along with the request.
,{ // Data Sending With Request To Server name:vname, email:vemail }
callback
The callback parameter is defined for a function to be executed if the request gets succeeded. This contains two sub parameters , the first one holds the returned data from the requested page and second one holds the status of the request.
,function(response,status){ // Required Callback Function //"response" receives - whatever written in echo of above PHP script. alert("*----Received Data----*\n\nResponse : " + response+"\n\nStatus : " + status); }
Note : Both ‘ data ‘ and ‘ callback ‘ parameters are optional parameters, whereas URL is mandatory for $.post() method.
Below is our complete code with download and live demo option
DOWNLOAD SCRIPT LIVE DEMO & GET WP THEME
Example:
The following example uses the $.post() method to send some data along with the request.
This is jquery_send.php page that contains jQuery $.post() method which can be implemented as given below:
<html> <head> <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'> <!-- Include JS File Here --> <link href="style.css" rel="stylesheet"/> <!-- Include JS File Here --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn").click(function(){ var vname = $("#name").val(); var vemail = $("#email").val(); if(vname=='' && vemail=='') { alert("Please fill out the form"); } else if(vname=='' && vemail!==''){alert('Name field is required')} else if(vemail=='' && vname!==''){alert('Email field is required')} else{ $.post("jquery_post.php", //Required URL of the page on server { // Data Sending With Request To Server name:vname, email:vemail }, function(response,status){ // Required Callback Function alert("*----Received Data----*\n\nResponse : " + response+"\n\nStatus : " + status);//"response" receives - whatever written in echo of above PHP script. $("#form")[0].reset(); }); } }); }); </script> </head> <body> <div id="main"> <h2>jQuery Ajax $.post() Method</h2> <hr> <form id="form" method="post"> <div id="namediv"><label>Name</label> <input type="text" name="name" id="name" placeholder="Name"/><br></div> <div id="emaildiv"><label>Email</label> <input type="text" name="email" id="email" placeholder="Email"/></div> </form> <button id="btn">Send Data</button> </div> </body> </html>
And here we have “jquery_post.php” file , which contains following PHP codes, that reads the request, processes it and return the result.
<?php if($_POST["name"]) { $name = $_POST["name"]; $email = $_POST["email"]; // Here, you can also perform some database query operations with above values. echo "Welcome ". $name ."!"; // Success Message } ?>
For more reference you can visit our below link:
Form Submit Without Page Refreshing-jQuery/PHP
Conclusion:
With above tutorial you became familiar with jQuery’s $.post() method. Hope you might have liked it, to learn more & to get more coding tricks keep reading our other blogs.
相关文章推荐
- jQuery验证插件 Validate详解
- jquery——$.each的用法
- jquery—multiSelect 一个页面多个下拉
- jquery-autocomplete 组件使用
- jquery ajax中使用jsonp的限制
- jQuery Mobile 和 Kendo UI 的比较
- jQuery 获取屏幕高度、宽度
- 5个最顶级jQuery图表类库插件【jquery插件库】
- 基于jQuery实现动态搜索显示功能
- 用jquery获取select标签中选中的option值及文本
- 给jquery对象添加自定义方法和扩展jquery类
- flot - jQuery 图表插件(jquery.flot)使用
- jQuery验证控件jquery.validate.js使用说明+中文API - Rex.He - 博客园
- jQuery插件ajaxfileupload.js实现上传文件
- OnContextMenu事件
- jQuery插件AjaxFileUpload实现ajax文件上传
- 原生js和jquery分别实现伸缩菜单的制作-水平方向导航栏
- Js/Jquery获取iframe中的元素
- jQuery中ready与load事件的区别
- Jquery日历插件介绍及使用