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_03_javascript全局观
Oct 11 Javascript
JavaScript将相对地址转换为绝对地址示例代码
Jul 19 Javascript
jQuery 中国省市两级联动选择附图
May 14 Javascript
js面向对象之静态方法和静态属性实例分析
Jan 10 Javascript
JS上传图片前实现图片预览效果的方法
Mar 02 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
Vue.js 中的 $watch使用方法
May 25 Javascript
node.js 利用流实现读写同步,边读边写的方法
Sep 11 Javascript
vue计算属性及使用详解
Apr 02 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 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
php按百分比生成缩略图的代码分享
2014/05/10 PHP
php短址转换实现方法
2015/02/25 PHP
WordPress主题制作之模板文件的引入方法
2015/12/28 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
php实现数据库的增删改查
2017/02/26 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
php屏蔽错误及提示的方法
2020/05/10 PHP
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
2013/08/13 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
Python中super函数用法实例分析
2019/03/18 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
python 操作hive pyhs2方式
2019/12/21 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
印度网上购物首选目的地:Flipkart
2016/08/01 全球购物
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
求两个数的乘积和商数,该作用由宏定义来实现
2013/03/13 面试题
秋季运动会活动方案
2014/02/05 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
幼儿园综治宣传月活动总结
2015/05/07 职场文书
家庭贫困证明
2015/06/16 职场文书
聊聊基于pytorch实现Resnet对本地数据集的训练问题
2022/03/25 Python