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 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
使用 jQuery 实现表单验证功能
Jul 05 jQuery
详解jquery选择器的原理
Aug 01 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
jQuery实现表格隔行换色
Sep 01 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 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不允许用户提交空表单(php空值判断)
2013/11/12 PHP
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
Yii框架布局文件的动态切换操作示例
2019/11/11 PHP
jQuery 动态酷效果实现总结
2009/12/27 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
2012/12/26 Javascript
JQuery判断子iframe何时加载完成解决方案
2013/08/20 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
2014/02/11 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
2018/08/27 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
Django权限机制实现代码详解
2018/02/05 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
在Python中使用turtle绘制多个同心圆示例
2019/11/23 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
python开发实例之Python的Twisted框架中Deferred对象的详细用法与实例
2020/03/19 Python
举例详解HTML5中使用JSON格式提交表单
2015/06/16 HTML / CSS
2015最新学生自我评价范文
2015/03/03 职场文书
商场营业员岗位职责
2015/04/14 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
电视新闻稿
2015/07/17 职场文书
党员学习型组织心得体会
2019/06/21 职场文书
Python排序算法之插入排序及其优化方案详解
2021/06/11 Python
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL