jquery+ajax提交form表單方法總結

這次帶給大家jquery ajax提交form表單方法總結，jquery ajax提交form表單的注意事項有哪些，下面就是實戰案例，一起來看一下。

jquery的ajax提交form表單的兩種方法小結(推薦)

方法一：

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

方法二：

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

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Ajax使用者認證與註冊使用詳解

#jQuery 與ajax怎麼實現局部刷新功能

以上是jquery+ajax提交form表單方法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！