jquery ajax异步提交表单数据的方法


Posted in jQuery onOctober 27, 2017

使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的;

处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据包括文件流的话,就需要使用 FormData对象:

不带文件的表单数据使用:var data = $(form).serialize();

带文件的表单数据使用:   var  data = new FormData($(form)[0]);

一、不带文件的ajax提交数据:

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("请求失败")
     }
    })
    
 })

 

二、带文件的ajax提交数据:

 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("请求失败")
     }
    })
    
 })

上面是用<form>表单来构建FormData对象,如果没有<form>表单处理方式如下:

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("请求失败")
     }
    })
    
 })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
jquery实现的放大镜效果示例
Feb 24 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
jQuery实现动态向上滚动
Dec 21 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 #jQuery
关于jQuery里prev()的简单操作代码
Oct 27 #jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 #jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 #jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 #jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 #jQuery
jquery select插件异步实时搜索实例代码
Oct 20 #jQuery
You might like
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
php内存缓存实现方法
2015/01/24 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
Javascript 入门基础学习
2010/03/10 Javascript
前后台交互过程中json格式如何解析以及如何生成
2012/12/26 Javascript
js动态修改input输入框的type属性(实现方法解析)
2013/11/13 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
2013/12/31 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
Node.js文件编码格式的转换的方法
2018/04/27 Javascript
详解vue+webpack+express中间件接口使用
2018/07/17 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
2018/07/30 Javascript
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
Python中关键字is与==的区别简述
2014/07/31 Python
python在Windows8下获取本机ip地址的方法
2015/03/14 Python
python开发之list操作实例分析
2016/02/22 Python
Python实现矩阵加法和乘法的方法分析
2017/12/19 Python
PyTorch上搭建简单神经网络实现回归和分类的示例
2018/04/28 Python
Pycharm在指定目录下生成文件和删除文件的实现
2020/12/28 Python
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
JSF面试题:Jsf中导航的标签是什么
2013/04/20 面试题
个人找工作求职简历的自我评价
2013/10/20 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
销售员试用期自我评价
2014/09/15 职场文书
2014年银行员工年终自我评价
2014/09/19 职场文书
个人作风建设心得体会
2014/10/22 职场文书
2014年小学英语教师工作总
2014/12/03 职场文书
文明旅游倡议书
2015/04/28 职场文书
2015教师节通讯稿
2015/07/20 职场文书
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android