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实现鼠标经过显示动画边框特效
Mar 24 jQuery
jQuery+pjax简单示例汇总
Apr 21 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
jQuery实现简单全选框
Sep 13 jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
jQuery实现电梯导航模块
Dec 22 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
如何去掉文章里的 html 语法
2006/10/09 PHP
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
php连接mssql的一些相关经验及注意事项
2013/02/05 PHP
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
2019/10/23 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
jQuery simpleModal插件的使用介绍
2016/08/30 Javascript
prototype与__proto__区别详细介绍
2017/01/09 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
2018/01/15 Javascript
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
angularJs中json数据转换与本地存储的实例
2018/10/08 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
pycharm设置注释颜色的方法
2018/05/23 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
python pymysql库的常用操作
2020/10/16 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
详解Pycharm第三方库的安装及使用方法
2020/12/29 Python
CSS3制作苹果风格键盘特效
2015/02/26 HTML / CSS
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
建龙钢铁面试总结
2014/04/15 面试题
店长职务说明书
2014/02/04 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
公司应聘求职信
2014/06/21 职场文书
Python编写冷笑话生成器
2022/04/20 Python