方法一:

分别获取所需数据元素,DOM结构外层不用包form标签(适用于数据量少,数据元素分散于整个页面)

$.ajax({
  type: 'POST',
url:'',
data: {
residence:[$('#region_1').val(),$('#region_2').val(),$('#region_3').val()],
address:$('#address').val()
},
dataType: 'json',
success: function(data){
},
error:function(err){
}
});

方法二:

需要包裹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);
}
});
}

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提交表单的方法总结的更多相关文章

  1. Validator验证Ajax提交表单的方法

    Validator验证Ajax提交表单的方法 转自:http://hunanpengdake.iteye.com/blog/1671360 当我们在一些稍微复杂的业务时,可能会遇到需要多个表单form ...

  2. jquery实现ajax提交表单

    一般情况下,我们提交form表单采用的是submit的方法,典型的场景如下. <form id="thisForm" method="post" acti ...

  3. php使用jquery Form ajax 提交表单,并上传文件

    在html5中我们通过FormData就可以ajax上传文件数据,不过因为兼容问题.我们选用jquery.form.min.js来进行ajax的表单提交.   一.jquery.form.js下载地址 ...

  4. jquery实现ajax提交表单信息

    最近在思考优化项目,想自己扩展一个jquery自动获取表单中的数据进行ajax提交.本人没有完整性学习jquery,基本上是现学现找,有点困难. 主要是扩展和拼接json转对象 很简单,附上代码: ; ...

  5. 利用jquery进行ajax提交表单和附带的数据

    1.获取表单数据: $form.serialize() 2.附带数据:input[status]=1 3.构造url链接:url = $form.attr('action') + '?input[st ...

  6. jquery 通过ajax 提交表单

    1.需要引入以下两个js文件 <script src="Easyui/jquery-1.7.2.min.js"></script>    <scrip ...

  7. jQuery序列化Ajax提交表单

    var formData=$("form").serialize(); $.ajax({ type: "POST", url: "/front/EPt ...

  8. jquery实现ajax提交表单数据或json数据

  9. Jquery ajax提交表单几种方法

    在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$('#表单ID').serialize();就行了,下面我来介绍两个提交表单数据的方法. ...

随机推荐

  1. ABP入门系列(3)——领域层定义仓储并实现

    ABP入门系列目录--学习Abp框架之实操演练 一.先来介绍下仓储 仓储(Repository): 仓储用来操作数据库进行数据存取.仓储接口在领域层定义,而仓储的实现类应该写在基础设施层. 在ABP中 ...

  2. request,reponse对象中的方法

    1.request对象 客户端的请求信息被封装在request对象中,通过它才能了解到客户的需求,然后做出响应.它是HttpServletRequest类的实例. 序号 方 法 说 明 1   obj ...

  3. Echarts自定义tootips

    由于业务需求,现在要自定义tootips; 设计稿如下: 代码如下: app.title = '坐标轴刻度与标签对齐'; var str1 = "top:-20px;border:0px s ...

  4. [Swift]LeetCode120. 三角形最小路径和 | Triangle

    Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adjacent n ...

  5. [Swift]LeetCode346. 从数据流中移动平均值 $ Moving Average from Data Stream

    Given a stream of integers and a window size, calculate the moving average of all integers in the sl ...

  6. [Swift]LeetCode433. 最小基因变化 | Minimum Genetic Mutation

    A gene string can be represented by an 8-character long string, with choices from "A", &qu ...

  7. 机器学习入门 - Google机器学习速成课程 - 笔记汇总

    机器学习入门 - Google机器学习速成课程 https://www.cnblogs.com/anliven/p/6107783.html MLCC简介 前提条件和准备工作 完成课程的下一步 机器学 ...

  8. 细说javascripe事件传播流程

    当我们使用js时,经常会遇到事件传播流程的问题,下面我说一下我的观点. 在js触发某个事件时会相应生成一个事件对象,而这个事件对象则会根据DOM事件流的方向进传递,而传递的顺序如下图所示: 事件对象会 ...

  9. webpack的基本配置项

    const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin& ...

  10. 心路历程(一)-自学java两个月心得

    这是我的第一条博文,在敲这些文字的时候我已经是一名大四的"老者".说自己"老者"确实如此,因为以前每当这个时候大一新学妹有上架了,哈哈,每当这个时候我们就想了很 ...