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实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
jQuery实现简单三级联动效果
Sep 05 jQuery
jQuery插件实现图片轮播效果
Oct 19 jQuery
jquery实现图片放大镜效果
Dec 23 jQuery
jquery插件实现悬浮的菜单
Apr 24 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 MySQL与分页效率
2008/06/04 PHP
php通过COM类调用组件的实现代码
2012/01/11 PHP
有关PHP性能优化的介绍
2013/06/20 PHP
PHP中数组的分组排序实例
2014/06/01 PHP
如何让CI框架支持service层
2014/10/29 PHP
解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory
2017/02/25 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
PHP的mysqli_ssl_set()函数讲解
2019/01/23 PHP
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
JS图片无缝滚动(简单利于使用)
2013/06/17 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
js确认删除对话框效果的示例代码
2014/02/20 Javascript
JS中类或对象的定义说明
2014/03/10 Javascript
node.js中使用node-schedule实现定时任务实例
2014/06/03 Javascript
JavaScript定义类和对象的方法
2014/11/26 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
JS简单实现String转Date的方法
2016/03/02 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
2017/03/14 Javascript
JS判断数组那点事
2017/10/10 Javascript
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
微信小程序template模版的使用方法
2019/04/13 Javascript
webpack3.0升级4.0的方法步骤
2020/04/02 Javascript
vue3.0生命周期的示例代码
2020/09/24 Javascript
python的urllib模块显示下载进度示例
2014/01/17 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
python 读取yaml文件的两种方法(在unittest中使用)
2020/12/01 Python
海外淘书首选:AbeBooks
2017/07/31 全球购物
大学生四个方面的自我评价
2013/09/19 职场文书
个人简历自我评价
2014/01/06 职场文书
租赁协议书范本
2014/04/22 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
患者身份识别制度
2015/08/06 职场文书