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 相关文章推荐
jquery 新浪网易的评论块制作
Jul 01 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
Apr 24 Javascript
使用jQuery.wechat构建微信WEB应用
Oct 09 Javascript
jQuery实现跨域
Feb 03 Javascript
jQuery过滤选择器用法分析
Feb 10 Javascript
AngularJS使用ng-options指令实现下拉框
Aug 23 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 Javascript
Bootstrap一款超好用的前端框架
Sep 25 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
Angular6使用forRoot() 注册单一实例服务问题
Aug 27 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
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 多关键字 高亮显示实现代码
2012/04/23 PHP
php setcookie(name, value, expires, path, domain, secure) 参数详解
2013/06/28 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
PHP Swoole异步Redis客户端实现方法示例
2019/10/24 PHP
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
js setattribute批量设置css样式
2009/11/26 Javascript
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
前台js调用后台方法示例
2013/12/02 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
js/jquery判断浏览器类型的方法小结
2015/05/12 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
2017/01/17 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
2017/04/11 Javascript
基于vue2实现上拉加载功能
2017/11/28 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
Vue this.$router.push(参数)实现页面跳转操作
2020/09/09 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
利用Hyperic调用Python实现进程守护
2018/01/02 Python
python 实现单通道转3通道
2019/12/03 Python
python爬虫基础知识点整理
2020/06/02 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
耐克中国官方商城:Nike中国
2018/10/18 全球购物
Tenstickers法国:墙贴和装饰贴纸
2019/08/26 全球购物
厨师岗位职责
2013/11/12 职场文书
大学生职业生涯规划书模板
2014/01/18 职场文书
《凡卡》教学反思
2014/04/09 职场文书
整脏治乱工作简报
2015/07/21 职场文书
职工的安全责任书范文!
2019/07/02 职场文书