Two ways to implement ajax form submission with jquery-JS Tutorial-php.cn

Two ways to implement ajax form submission with jquery

零下一度

Release： 2017-06-29 10:08:59

Original

1610 people have browsed it

Method 1:

Obtain the required data elements separately. The outer layer of the DOM structure does not need to include the form tag (suitable for small amounts of data and data elements scattered throughout the page)

$.ajax({
　　type: 'POST',
   url:'',
   data: {
        residence:[$('#region_1').val(),$('#region_2').val(),$('#region_3').val()],
        address:$('#address').val()
   },
   dataType: 'json',
   success: function(data){
   },
   error:function(err){
   }
   });

Copy after login

Method 2:

Need to wrap the form tag (suitable for large amounts of data and concentrated elements)

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);
                     }
                });
        }

Copy after login

html code:

<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>

Copy after login

The above is the detailed content of Two ways to implement ajax form submission with jquery. For more information, please follow other related articles on the PHP Chinese website!