Jquery ajax提交表单几种方法详解
Jquery ajax提交表单几种方法详解
[导读] 在jquery中ajax提交表单有post与get方式，在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了，下面我来介绍两个提交表单数据的方法。$get方式提交表单get() 方法通过远程 HTTP
$get方式提交表单
get() 方法通过远程 HTTP GET 请求载入信息
格式
$(selector).get(url,data,success(response,status,xhr),dataType)
请求 test.php 网页，传送2个参数，忽略返回值：
$.get("test.php", { name: "John", time: "2pm" } );
显示 test.php 返回值(HTML 或 XML，取决于返回值)：
| 代码如下 | 复制代码 |
|
$.get("test.php", function(data){ |
|
ajax 序列化表单
$.（#Form）.serialize( NameValuePair )//发送ID/CLASSS为form的表单里所有要提交的数据
虚拟一个表单，并设置表单控件名与值。
参数
NameValuePair
必选项。设置虚拟的表单控件。该参数形式为：{ name1=value, name2=value2, ......}
返回值
虚拟表单序列化后的字符串，其格式如：username=%E5%95%8A%E8%94%A1&password=123456
| 代码如下 | 复制代码 |
|
<form> |
|
输出标准的查询字符串：
a=1&b;=2&c;=3&d;=4&e;=5
$POST方式提交表单
$.post
jQuery.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求
参数：
url (String) : 发送请求的URL地址.
data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。
callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
| 代码如下 | 复制代码 |
|
$.post("momsg.php",{"tel":$("#username").val()},function(data){ |
|
通过 AJAX POST 请求改变 div 元素的文本：
| 代码如下 | 复制代码 |
|
$("input").keyup(function(){ |
|
实例
| 代码如下 | 复制代码 |
|
<script type="text/javascript"> //提交前触发的事件 //这里的countryid 可以动态从GridView里面取 //调用Juqery Ajax var text=msg.split('<'); //当AJAX请求成功时添加一个被执行的方法 //清空文本里面的值 //获取下拉菜单里面的文本内容 |
|
精髓：
方法一：
function AddHandlingFeeToRefund()
{
var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx";
alert($('#formAddHandlingFee').serialize());
$.ajax({
type: "POST",
dataType: "html",
url: AjaxURL + '?Action=' + 'SubmitHandlingFee' +
'&OrderNumber=' + $.trim($("#<%=this.txtOrderNumber.ClientID
%>").val()),
data: $('#formAddHandlingFee').serialize(),//要发送的是formAddHandlingFee表单中的数据
success: function (result) {
var strresult=result;
alert(strresult);
//加载最大可退金额
$("#spanMaxAmount").html(strresult);
},
error: function(data) {
alert("error:"+data.responseText);
}
});
}
方法二：
//ajax提交form表单的方式
$('#formAddHandlingFee').submit(function() {
var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx";
alert($('#formAddHandlingFee').serialize());
$.ajax({
type: "POST",
dataType: "html",
url: AjaxURL + '?Action=' + 'SubmitHandlingFee' +
'&OrderNumber=' + $.trim($("#<%=this.txtOrderNumber.ClientID
%>").val()),
data: $('#formAddHandlingFee').serialize(),
success: function (data) {
var strresult=data;
alert(strresult);
//加载最大可退金额
$("#spanMaxAmount").html(strresult);
},
error: function(data) {
alert("error:"+data.responseText);
}
});
}
);
页面html代码：
<form id="formAddHandlingFee"
name="formAddHandlingFee" enctype="multipart/form-data"
onsubmit="AddHandlingFeeToRefund()">
<table id="AddHandlingFee" class="Wfill">
<tr>
<td>
<asp:Literal ID="UI_Amount"
runat="server" Text="处理费用" meta:resourcekey="HandlingFeeAmount" />
</td>
<td>
<input type="text"
id="txtHandlingFeeAmount" name="txtHandlingFeeAmount"
class="{required:true,number:true}" maxlength="12" />
</td>
</tr>
<tr>
<td>
<asp:Literal ID="UI_HandlingFeeType"
runat="server" Text="费用类型" meta:resourcekey="HandlingFeeHandlingFeeType"
/>
</td>
<td>
<crmweb:HtmlSelectControl
ID="HandlingFeeType"
EnumTypeName="DX.OMS.Model.Common.HandlingFeeType,DX.OMS.Model.Common"
EmptyValue="" EmptyText="Select" runat="server" class="text {required:true}"/>
</td>
</tr>
<tr>
<td>
<asp:Literal ID="UI_Notes" runat="server" Text="备注" meta:resourcekey="HandlingFeeNotes" />
</td>
<td>
<textarea id="txtNotes"
name="txtNotes" class="text {required:true}" cols="22" rows="2"
maxlength="100"></textarea>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input id="Submit1" type="submit" value="添加处理费" />
<asp:Button ID="Button1"
runat="server" Text="添加处理费"
OnClientClick="javascript:AddHandlingFeeToRefund()" />
</td>
</tr>
</table>
</form>
方法三、
今天刚好看到Jquery的ajax提交数据到服务器的方法,原文是:
保存数据到服务器，成功时显示信息。
jQuery 代码:
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});后来我就想了一下,我要提交form表单有没有办法呢?但是我不可能每个fom的input都写一次var demo=$("#divname").val();的.
输入框加内容
</form>
return ($(this).attr("name")+'='+$(this).val());
}).get().join("&") ;
alert(data);
ps:你alert一下,你会发现,这里面的架构就是divname=xxx&divname2=xxxx等等,
然后在回头看看ajax提交的:
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
有没有发现,只要我们把我们上面获取到的,放到data里面就可以了?
完整的代码,修改后应该是
$(document).ready(function () {
$('#tijiao').click(function() {
var str_data=$("#form input").map(function(){
return ($(this).attr("name")+'='+$(this).val());
}).get().join("&");
$.ajax({
type: "POST",
dataType: "html",
url: "{:U('Register/validation')}",
data:str_data,
success: function(msg){
alert(msg);return false;
alert( "Data Saved: " + msg );
}
});
});
});
ok,就这么简单,如果适用的话,可以拿去用哟...
