jquery ajax异步提交表单数据
使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的;
处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据包括文件流的话,就需要使用 FormData对象:
不带文件的表单数据使用:var data = $(form).serialize();
带文件的表单数据使用: var data = new FormData($(form)[0]);
一、不上传文件的ajax提交数据:
1、用serialize()方法序列化form表单提交参数 :
html:form表单
<form id="addForm" action="${pageContext.request.contextPath}/admin/saveAdd" method="post">
<input type="text" name="name" placeholder="请输入名字" />
<input type="password" name="password" placeholder="密码"/>
</form>
<button type="button" id="submitAdd">确认</button>
jquery 异步处理
$("#submitAdd").click(function(){ var targetUrl = $("#addForm").attr("action");
var data = $("#addForm").serialize();
$.ajax({
type:'post',
url:targetUrl,
cache: false,
data:data,
dataType:'json',
success:function(data){
alert('success');
},
error:function(){
alert("请求失败")
}
}) })
2、用data{}格式的方法提交data参数:
html,form表单:
<form id="addForm" action="${pageContext.request.contextPath}/admin/saveAdd" method="post">
<input type="text" id="name" name="name" placeholder="请输入名字" />
<input type="password" id="password" name="password" placeholder="密码"/>
</form>
<button type="button" id="submitAdd">确认</button>
Jquery 异步处理:
$("#submitAdd").click(function(){ var targetUrl = $("#addForm").attr("action");
var userName =$("#name").val();
var pd= $("#passwrod").val();
//创建数组
var array = new Array();
//往数组添加数据
array.push('hello');
array.push('world');
$.ajax({
type:'post',
url:targetUrl,
cache: false,
data:{"name":userName,"password":pd,"array[]":array}, //注意,传递数组参数时,参数名需要加上[],如 "array[]",否则后台获取不了
dataType:'json',
success:function(data){
alert('success');
},
error:function(){
alert("请求失败")
}
}) })
二、上传文件的ajax提交数据:
1、用<form>表单来构建FormData对象:
html:form表单
注意:有文件上传的form表单需要在<form>标签里加入 enctype="multipart/form-data"属性 :
<form id="addForm" action="${pageContext.request.contextPath}/admin/saveAdd" method="post"enctype=" multipart/form-data">
<input type="text" name="name" placeholder="请输入名字" />
<input type="password" name="password" placeholder="密码"/>
<input type="file" name="avatar" />
</form>
<button type="button" id="submitAdd">确认</button>
jquery 异步处理
$("#submitAdd").click(function(){ var targetUrl = $("#addForm").attr("action");
var data = new FormData($( "#addForm" )[0]);
$.ajax({
type:'post',
url:targetUrl,
cache: false, //上传文件不需缓存
processData: false, //需设置为false。因为data值是FormData对象,不需要对数据做处理
contentType: false, //需设置为false。因为是FormData对象,且已经声明了属性enctype="multipart/form-data"
data:data,
dataType:'json',
success:function(data){
alert('success');
},
error:function(){
alert("请求失败")
}
}) })
2、如果不用<form>表单构建FormData对象的处理方法如下:
html:没有form表单
<div id="uploadFile">
<input id="file" name="avatar" type="file"/>
<button id="upload" data-url="/admin/upload" type="button">上传头像</button>
</div>
jquery异步处理:
$("#upload").click(function(){ var targetUrl = $(this).attr("data-url");
var data = new FormData();
//FormData对象加入参数
data.append('file', $('#file')[0].files[0]); //'file' 为参数名,$('#file')[0].files[0])获取上传的文件,如果需上传多个文件,要在<input>标签加上属性multiple
$.ajax({
type:'post',
url:targetUrl,
cache: false,
processData: false,
contentType: false,
data:data,
dataType:'json',
success:function(data){
alert('success');
},
error:function(){
alert("请求失败")
}
}) })
补充说明:
注意:需要调用函数返回值时,需要为ajax设置 async : false,否则ajax返回值将异步,导致函数返回不到ajax里面的返回值;
具体如下:
//校验验证码
function validateCode(){
var result ;
var validateCode = $("#validateCode").val();
var validateCodeUrl =$("#validateCode").attr("data-validate");
$.ajax({
type:'get',
url :validateCodeUrl,
data:{'validateCode':validateCode},
dataType:'json',
async : false,
success:function(flag){
if(flag.valid==true){
$("#validateCode").removeClass("warn-border");
$("#small-warn").remove();
result =true;
return result ;
}
var tag ='<small id="small-warn" class="small-warn"><i class="fa fa-close"></i>请输入正确的验证码</small>'
$("#validateCode").addClass("warn-border");
$(".validate-img-code").after(tag);
result =false;
return result ;
},
error:function(){
alert("请求失败!")
}
})
return result ;
}
jquery ajax异步提交表单数据的更多相关文章
- ASP.NET MVC 网站开发总结(五)——Ajax异步提交表单之检查验证码
首先提出一个问题:在做网站开发的时候,用到了验证码来防止恶意提交表单,那么要如何实现当验证码错误时,只是刷新一下验证码,而其它填写的信息不改变? 先说一下为什么有这个需求:以提交注册信息页面为例,一般 ...
- jquery ajax异步提交表单数据的方法
使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...
- 使用ajax异步提交表单
虽然这篇文章的标题是提交表单,但是主要的难点在于使用ajax提交文本域的内容, 在工作中的经常会需要ajax跨域的问题,通常的需求使用jsonp就可以得到解决,但是当前项目中有一个图片服务器,客户端需 ...
- MVC之AJAX异步提交表单
第一种用法: 在MVC中,依然可以使用ajax校验,跟在WebForm中的使用时一样的,唯一的区别就是将以前的URL路劲改为访问控制器下的行为 前台 <html> <head> ...
- 使用AJAX异步提交表单的几种方式
方式一 手工收集所有的用户输入,封装为大的“k1=v1&k2=v2…”键值对形式,使用$.post(url, data,fn)把数据提交给服务器 $.ajax({ type:'post', u ...
- 雷林鹏分享:jQuery EasyUI 表单 - 创建异步提交表单
jQuery EasyUI 表单 - 创建异步提交表单 本教程向您展示如何通过 easyui 提交一个表单(Form).我们创建一个带有 name.email 和 phone 字段的表单.通过使用 e ...
- 使用jQuery实现跨域提交表单数据
我们在WEB开发中有时会遇到这种情况,比如要从A网站收集用户信息,提交给B网站处理,这个时候就会涉及到跨域提交数据的问题.本文将给您介绍如何使用jQuery来实现异步跨域提交表单数据. 在jQue ...
- jQuery.Form.js 异步提交表单使用总结
jQuery.Form.js 是一个用于使用jQuery异步提交表单的插件,它使用方法简单,支持同步和异步两种方式提交. 第一步:引入jQuery与jQuery.Form.js <script ...
- jQuery.form.js jQuery ajax异步提交form
jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传. 官网下载地址:http://plugins.jquery.com/form/ API ajaxForm 增加所 ...
随机推荐
- Ubuntu做Tomcat服务:insserv: warning: script 'tomcat' missing LSB tags and overrides
https://blog.csdn.net/hanchao5272/article/details/79819460 转载自:https://blog.bbzhh.com/index.php/arch ...
- Azure Document DB Repository 的实现
阅读 需要大约 5 分钟. 前景: Azure Cosmos DB 由 Microsoft 提供,是全球分布式多模型数据库. 通过 Azure Cosmos DB 跨任意数量的 Azure 地理区域 ...
- 将Model对象转换成json文本或者json二进制文件
将Model对象转换成json文本或者json二进制文件 https://github.com/casatwy/AnyJson 注意:经过测试,不能够直接处理字典或者数组 主要源码的注释 AJTran ...
- Python学习---Django的request.post源码分析
request.post源码分析: 可以看到传递json后会帮我们dumps处理一次最后一字节形式传递过去
- Python学习---爬虫学习[scrapy框架初识]
Scrapy Scrapy是一个框架,可以帮助我们进行创建项目,运行项目,可以帮我们下载,解析网页,同时支持cookies和自定义其他功能. Scrapy是一个为了爬取网站数据,提取结构性数据而编写的 ...
- ZT 输入一个字符串,查找它的第一个数字串,并返回其个数
/*查找字符串中的数字串问题 输入一个字符串,查找它的第一个数字串,并返回其个数 */ #include <stdio.h> char firstnum(char *input,char ...
- ZT C语言链表操作(新增单向链表的逆序建立)
这个不好懂,不如看 转贴:C语言链表基本操作http://www.cnblogs.com/jeanschen/p/3542668.html ZT 链表逆序http://www.cnblogs.com/ ...
- 0x01 现阶段目标
现阶段目标: 1.完成前端知识基础的学习. 具体如下: 在目前学习的基础上(html,css,JavaScript+BOM基础已经大致了解).针对DOM进行学习,个人在http://how2j.cn? ...
- Jenkins 配合 GitLab 实现分支的自动合并、自动创建 Tag
Jenkins 配合 GitLab 实现分支的自动合并.自动创建 Tag 背景 GitFlow工作流简介 Gitflow工作流定义了一个围绕项目发布的严格分支模型,它会相对复杂一点,但提供了用于一个健 ...
- [转]IE9.0或者360下js(JavaScript、jQuery)不能正确执行(加载),按F12后执行正常;Firefox下ajax的success返回数据data(json、string)无法获取
兼容问题1: 页面的分享等插件加载不全,并无法点击. 兼容问题2: IE下页面选择器(#id..class.etc.)绑定click事件无法访问到,后台springmvc方法,也无法获取ajax的su ...