这次给大家带来jquery+ajax提交form表单方法总结,jquery+ajax提交form表单的注意事项有哪些,下面就是实战案例,一起来看一下。
jquery的ajax提交form表单的两种方法小结(推荐)
方法一:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | 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(),
success: function (result) {
var strresult=result;
alert(strresult);
$( "#spanMaxAmount" ).html(strresult);
},
error: function (data) {
alert( "error:" +data.responseText);
}
});
}
|
登录后复制
方法二:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$( '#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代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <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>
|
登录后复制
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
Ajax用户认证与注册使用详解
jQuery+与ajax怎么实现局部刷新功能
以上就是jquery+ajax提交form表单方法总结的详细内容,更多请关注php中文网其它相关文章!