Summary of jquery+ajax submission form method

This time I will bring you a summary of the jquery ajax form submission method. What are the precautions for jquery ajax submission of the form. The following is a practical case, let's take a look.

Summary of two methods of jquery's ajax submission form (recommended)

Method one:

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

Method two:

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

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of Ajax user authentication and registration

How to implement the partial refresh function with jQuery and ajax

The above is the detailed content of Summary of jquery+ajax submission form method. For more information, please follow other related articles on the PHP Chinese website!