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 相关文章推荐
经典的带阴影的可拖动的浮动层
Jun 26 Javascript
juqery 学习之四 筛选过滤
Nov 30 Javascript
获取表单控件原始(初始)值的方法
Aug 21 Javascript
AngularJs 60分钟入门基础教程
Apr 03 Javascript
Vuejs第十三篇之组件——杂项
Sep 09 Javascript
老生常谈Javascript中的原型和this指针
Oct 09 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
Mar 15 Javascript
vue的全局提示框组件实例代码
Feb 26 Javascript
详解React之父子组件传递和其它一些要点
Jun 25 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 Javascript
layUI实现列表查询功能
Jul 27 Javascript
详解小程序横屏方案对比
Jun 28 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下网站防IP攻击代码,超级实用
2010/10/24 PHP
PHP加密解密类实例分析
2015/04/20 PHP
文字幻灯片
2006/06/26 Javascript
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
怎么清空javascript数组
2013/05/11 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
2013/08/02 Javascript
深入学习JavaScript中的Rest参数和参数默认值
2015/07/28 Javascript
第九章之路径分页标签与徽章组件
2016/04/25 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
windows下更新npm和node的方法
2017/11/30 Javascript
浅谈vue项目可以从哪些方面进行优化
2018/05/05 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
微信小程序前端自定义分享的实现方法
2019/06/13 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
JavaScript实现拖动对话框效果的实现代码
2020/10/12 Javascript
Python 字符串中的字符倒转
2008/09/06 Python
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
Python中xrange与yield的用法实例分析
2017/12/26 Python
Python动态导入模块和反射机制详解
2020/02/18 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
幼儿园教师教育感言
2014/02/28 职场文书
工人先锋号申报材料
2014/12/29 职场文书
入团申请书格式
2019/06/20 职场文书
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android