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 16 Javascript
jQuery中:text选择器用法实例
Jan 03 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
May 14 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
Aug 21 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
Oct 31 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
Nov 23 Javascript
JS验证输入的是否是数字及保留几位小数问题
May 09 Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 Javascript
详解Vue调用手机相机和相册以及上传
May 05 Javascript
微信小程序实现手势滑动效果
Aug 26 Javascript
vue中使用vue-pdf的方法详解
Sep 05 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
改变Apache端口等配置修改方法
2008/06/05 PHP
php 编写安全的代码时容易犯的错误小结
2010/05/20 PHP
基于php验证码函数的使用示例
2013/05/03 PHP
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
Javascript的表单验证-提交表单
2016/03/18 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
js实现的光标位置工具函数示例
2016/10/03 Javascript
浅谈Vue.js
2017/03/02 Javascript
详解webpack自定义loader初探
2018/08/29 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
详解Ant Design of React的安装和使用方法
2018/12/27 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
JS实现选项卡效果的代码实例
2019/05/20 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
2019/09/25 Javascript
JS XMLHttpRequest原理与使用方法深入详解
2020/04/30 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
[40:55]Liquid vs LGD 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:01:35]Optic vs paiN 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python测试人员需要掌握的知识
2018/02/08 Python
python实现决策树ID3算法的示例代码
2018/05/30 Python
Python mutiprocessing多线程池pool操作示例
2019/01/30 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
python梯度下降算法的实现
2020/02/24 Python
python Matplotlib数据可视化(2):详解三大容器对象与常用设置
2020/09/30 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
工程预算与管理应届生求职信
2013/10/06 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
团员自我评价范文
2015/03/10 职场文书
预备党员半年考察意见
2015/06/01 职场文书