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技术-屏蔽类
Aug 15 Javascript
javaScript对象和属性的创建方法
Jan 15 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
Feb 27 Javascript
jquery插件开发之实现jquery手风琴功能分享
Mar 10 Javascript
javascript中错误使用var造成undefined
Mar 31 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
AngularJS基础 ng-selected 指令简单示例
Aug 03 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
May 08 Javascript
使用Vue实现图片上传的三种方式
Jul 17 Javascript
Node.js API详解之 net模块实例分析
May 18 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
用cookies来跟踪识别用户
2006/10/09 PHP
浅析PHP中的UNICODE 编码与解码
2013/06/29 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
php写app用的框架整理
2019/09/29 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
JavaScript的变量作用域深入理解
2009/10/25 Javascript
javascript代码加载优化方法
2011/01/30 Javascript
namespace.js Javascript的命名空间库
2011/10/11 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
2016/06/07 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
微信小程序数字滚动插件使用详解
2018/02/02 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
2018/08/29 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
2020/02/03 Javascript
vue全局使用axios的操作
2020/09/08 Javascript
python实现文件分组复制到不同目录的例子
2014/06/04 Python
总结Python中逻辑运算符的使用
2015/05/13 Python
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
pandas如何处理缺失值
2019/07/31 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
UNIX文件类型
2013/08/29 面试题
老公写给老婆的检讨书
2015/05/06 职场文书
革命电影观后感
2015/06/18 职场文书
红白喜事主持词
2015/07/06 职场文书