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

方法一：

. 代码如下:

function addhandlingfeetorefund()

 

        {
            var ajaxurl= "../ordermanagement/ajaxmodifyorderservice.x";      
            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>