ajax提交表单方式
2016-03-02 17:06
218 查看
用ajax提交表单遇到的问题,虽然有点久远了;但是今天他们遇到了就记录一下。
先说用ajax提交表单
方式一:ajax提交把formAddHandlingFee序列化参数然后提交,获取回传结果,做后续操作
方式二:用jQuery.Form.js 插件的作用是实现Ajax提交表单。需要注意的是ajaxSubmit()不会自动阻止表单提交,想阻止表单提交,要自己return false;
方式三:用ajaxform或者ajaxsubmit
注意:ajaxsubmit()与ajaxForm()都可以没有参数或者接受1个参数。该参数既可以是一个回调函数,也可以是一个options对象。该对象功能非常强大,说明如下:
var options={
url:url, //form提交数据的地址
type:type, //form提交的方式(method:post/get)
target:target, //服务器返回的响应数据显示在元素(Id)号确定
beforeSubmit:function(), //提交前执行的回调函数
success:function(), //提交成功后执行的回调函数
dataType:null, //服务器返回数据类型
clearForm:true, //提交成功后是否清空表单中的字段值
restForm:true, //提交成功后是否重置表单中的字段值,即恢复到页面加载时的状态
timeout:6000 //设置请求时间,超过该时间后,自动退出请求,单位(毫秒)。
}
先说用ajax提交表单
方式一:ajax提交把formAddHandlingFee序列化参数然后提交,获取回传结果,做后续操作
function AddHandlingFeeToRefund() { var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx"; $.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("提交失败"); }, error: function(data) { alert("提交失败"); } }); }
方式二:用jQuery.Form.js 插件的作用是实现Ajax提交表单。需要注意的是ajaxSubmit()不会自动阻止表单提交,想阻止表单提交,要自己return false;
$("#form1".submit)(function(){ $("#form1").ajaxSubmit(); return false; })
方式三:用ajaxform或者ajaxsubmit
$("#MailForm").ajaxSubmit(function(message) { alert("表单提交已成功!"); });
<pre name="code" class="javascript">$("#goodsForm").ajaxForm(function(mes){ if(mes == "true"){ alert("提交成功"); window.close(); }else{ alert("提交失败"); } });
注意:ajaxsubmit()与ajaxForm()都可以没有参数或者接受1个参数。该参数既可以是一个回调函数,也可以是一个options对象。该对象功能非常强大,说明如下:
var options={
url:url, //form提交数据的地址
type:type, //form提交的方式(method:post/get)
target:target, //服务器返回的响应数据显示在元素(Id)号确定
beforeSubmit:function(), //提交前执行的回调函数
success:function(), //提交成功后执行的回调函数
dataType:null, //服务器返回数据类型
clearForm:true, //提交成功后是否清空表单中的字段值
restForm:true, //提交成功后是否重置表单中的字段值,即恢复到页面加载时的状态
timeout:6000 //设置请求时间,超过该时间后,自动退出请求,单位(毫秒)。
}
相关文章推荐
- 性能测试(一):性能测试关心的结果
- 二分查找
- 所有的问题, 包括自己想象的问题 <<总结项目用到的设计模式>>
- ionic 隐藏action bar的返回按钮
- Android系统服务详解-android学习之旅(95)
- 【Android】Service中判断当前是否全屏(状态栏是否隐藏)
- poj2983Is the Information Reliable?——差分约束
- 取消EditText自动获取焦点
- POJ 2676 Sudokou DFS
- bootstrap 带有时分秒的日期控件
- Python-----filter
- ASP.Net MVC开发基础学习笔记(2):HtmlHelper与扩展方法
- *翻译电话号码
- 计算文件大小,删除缓存
- BZOJ3000: Big Number
- (Educational Codeforces Round 9)Longest Subsequence(dp)
- jsp常用动作
- android开发我的新浪微博客户端-载入页面UI篇(1.1)
- 计算文件大小,删除缓存
- mysql二进制安装