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


Posted in Javascript onMarch 03, 2014

方法一:

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>
Javascript 相关文章推荐
javascript 学习之旅 (3)
Feb 05 Javascript
ajax 文件上传应用简单实现
Mar 03 Javascript
javascript 异常处理使用总结
Jun 21 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
Jan 08 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 Javascript
jquery判断浏览器后退时候弹出消息的方法
Aug 11 Javascript
浅谈javascript对象模型和function对象
Dec 26 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
jquery获取点击控件的绝对位置简单实例
Oct 13 Javascript
完美解决axios跨域请求出错的问题
Feb 05 Javascript
Vue3.x源码调试的实现方法
Oct 13 Javascript
JS轻量级函数式编程实现XDM二
Jun 16 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
Mar 03 #Javascript
js的hasownproperty使用示例
Mar 02 #Javascript
javascript对象的使用和属性操作示例详解
Mar 02 #Javascript
使用js显示当前时间示例
Mar 02 #Javascript
jquery实现背景墙聚光灯效果示例分享
Mar 02 #Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 #Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 #Javascript
You might like
SONY SRF-M100的电路分析
2021/03/02 无线电
怎样在php中使用PDF文档功能
2006/10/09 PHP
一个简单的php实现的MySQL数据浏览器
2007/03/11 PHP
PHP字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
php生成验证码函数
2015/10/20 PHP
PHP的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
PHP设置images目录不充许http访问的方法
2016/11/01 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
JQuery标签页效果实例详解
2015/12/24 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
vue不通过路由直接获取url中参数的方法示例
2017/08/24 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
2017/11/06 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
2017/12/10 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
Python异常处理总结
2014/08/15 Python
浅谈Python 中整型对象的存储问题
2016/05/16 Python
Python内置函数——__import__ 的使用方法
2017/11/24 Python
python调用Delphi写的Dll代码示例
2017/12/05 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
python里dict变成list实例方法
2019/06/26 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
应届生船舶驾驶求职信
2013/10/19 职场文书
单位提档介绍信
2014/01/17 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
Vue如何清空对象
2022/03/03 Vue.js