jquery的ajax提交form表单的两种方法小结(推荐)


Posted in Javascript onMay 25, 2016

jquery的ajax提交form表单的两种方法小结(推荐)

方法一:

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>

以上这篇jquery的ajax提交form表单的两种方法小结(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
jquery修改属性值实例代码(设置属性值)
Jan 06 Javascript
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 Javascript
node.js正则表达式获取网页中所有链接的代码实例
Jun 03 Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
js实现select下拉框菜单
Dec 08 Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 Javascript
layui table去掉右侧滑动条的实现方法
Sep 05 Javascript
如何优雅地在Node应用中进行错误异常处理
Nov 25 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 Javascript
BootStrap的Datepicker控件使用心得分享
May 25 #Javascript
jquery按回车键实现表单提交的简单实例
May 25 #Javascript
Javascript之BOM(window对象)详解
May 25 #Javascript
jQueryUI中的datepicker使用方法详解
May 25 #Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
May 25 #Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 #Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 #Javascript
You might like
浅析php header 跳转
2013/06/17 PHP
利用PHP生成静态html页面的原理
2016/09/30 PHP
PHP 芝麻信用接入的注意事项
2016/12/01 PHP
thinkPHP交易详情查询功能详解
2016/12/02 PHP
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
js拼接html注意问题示例探讨
2014/07/14 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
javascript跨域总结之window.name实现的跨域数据传输
2015/11/01 Javascript
js省市联动效果完整实例代码
2015/12/09 Javascript
Javascript实现的SHA-256加密算法完整实例
2016/02/02 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
详解js的六大数据类型
2016/12/27 Javascript
ajax异步请求详解
2017/01/06 Javascript
从零学习node.js之简易的网络爬虫(四)
2017/02/22 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
layui-select动态选中值的例子
2019/09/23 Javascript
Node.js控制台彩色输出的方法与原理实例详解
2019/12/01 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
Python列表生成器的循环技巧分享
2015/03/06 Python
python opencv检测目标颜色的实例讲解
2018/04/02 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
python简易远程控制单线程版
2018/06/20 Python
Python面向对象之静态属性、类方法与静态方法分析
2018/08/24 Python
python实现简单的文字识别
2018/11/27 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
python标准库os库的函数介绍
2020/02/12 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
css3教程之倾斜页面
2014/01/27 HTML / CSS
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
2014年民主评议党员工作总结
2014/12/02 职场文书
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB