zl程序教程

您现在的位置是:首页 >  前端

当前栏目

jquery实现ajax提交form表单的方法总结

jQuery方法AJAX 实现 总结 提交 表单 Form
2023-06-13 09:15:18 时间

方法一:

复制代码代码如下:

functionAddHandlingFeeToRefund()

       {
           varAjaxURL="../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){
                       varstrresult=result;
                       alert(strresult);
                       //加载最大可退金额
                       $("#spanMaxAmount").html(strresult);
                   },
                   error:function(data){
                       alert("error:"+data.responseText);
                    }

               });

       }


方法二:
复制代码代码如下:

       //ajax提交form表单的方式
       $("#formAddHandlingFee").submit(function(){
           varAjaxURL="../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){
                       varstrresult=data;
                       alert(strresult);
                       //加载最大可退金额
                       $("#spanMaxAmount").html(strresult);
                   },
                   error:function(data){
                       alert("error:"+data.responseText);
                    }

               });
       }

   );


页面html代码:
复制代码代码如下:
                 <formid="formAddHandlingFee"name="formAddHandlingFee"enctype="multipart/form-data"onsubmit="AddHandlingFeeToRefund()">
                   <tableid="AddHandlingFee"class="Wfill">
                       <tr>
                           <td>
                               <asp:LiteralID="UI_Amount"runat="server"Text="处理费用"meta:resourcekey="HandlingFeeAmount"/>
                           </td>
                           <td>
                               <inputtype="text"id="txtHandlingFeeAmount"name="txtHandlingFeeAmount" class="{required:true,number:true}"maxlength="12"/>
                           </td>
                       </tr>
                       <tr>
                           <td>
                               <asp:LiteralID="UI_HandlingFeeType"runat="server"Text="费用类型"meta:resourcekey="HandlingFeeHandlingFeeType"/>
                           </td>
                           <td>
                               <crmweb:HtmlSelectControlID="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:LiteralID="UI_Notes"runat="server"Text="备注"meta:resourcekey="HandlingFeeNotes"/>
                           </td>
                           <td>
                               <textareaid="txtNotes"name="txtNotes"class="text{required:true}"cols="22"rows="2"maxlength="100"></textarea>
                           </td>
                       </tr>

                       <tr>
                           <td>
                           </td>
                           <td>
                               <inputid="Submit1"type="submit"value="添加处理费" />
                               <asp:ButtonID="Button1" runat="server"Text="添加处理费"OnClientClick="javascript:AddHandlingFeeToRefund()"/>
                           </td>

                       </tr>
                   </table>
                   </form>