AJAX 提交 FormData 报data undefined

直接上代码js里的
$('#submit').click(function(){
var shop = {};
shop.shopName = $('#shop-name').val();
shop.shopAddr = $('#shop-addr').val();
shop.phone = $('#shop-phone').val();
shop.shopDesc = $('#shop-desc').val();
shop.shopCategory = {
shopCategoryId:$('#shop-category').find('option').not(function(){
return !this.selected;
}).data('id')
};
shop.area = {
areaId:$('#area').find('option').not(function(){
return !this.selected;
}).data('id')
};
var shopImg = $('#shop-img')[0].files[0];
var formData = new FormData();
formData.append('shopImg',shopImg);
formData.append('shopStr',JSON.stringify(shop));
var verifyCodeActual = $('#j_captcha').val();
if(!verifyCodeActual){
$.toast('请输入验证码!');
return;
}
formData.append('verifyCodeActual',verifyCodeActual);
alert(formData.get('shopStr'));
$.ajax({
url:registerShopUrl,
type:'POST',
data: formData,
contentType:false,
processData:false,
cache:false,
success:function(data){
if(data.success){
$.toast('提交成功');
}else{
$.toast('提交失败' + data.errMsg);
}
$('#captcha_img').click();
}
});
});
图片说明

0

12个回答

后台没返回吗 if前面console.log(data) 看看

1

success里面先不要判断,先打印你的data看看到底是什么格式

1

你这好像是Post请求,想保存某些信息。但是content-type设置成false.后台能接收到你传过去的数据么?
你调试,代码没有走进 success吧,没走进去当然是undefined,error也没写,就算ajax走错了,你也不知道

1

success里面先不要判断,先打印你的data看看到底是什么

1

data 的数据格式没有确定

0

既然有用打开调试工具,可以切到Network去看报文,看请求的返回信息。
另外,你这里只设置success事件,设置一下失败的事件,应该就能有信息输出了。

0

数据类型要以 json类型传输 设置ajax的dataType参数为"json"

0

ajax datatype 类型 , html、json、jsonp、script或者text 你的类型改一下,对应的
看看后台action 返回结果类型是否跟dataType匹配

0

先调试一下,看看是不是数据类型不正确

0

把 contentType 设置为 : application/json; charset=utf-8

0
共12条数据 1 尾页
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
使用formdata提交ajax请求
var form = $("#form_id")[0]; var oFile = $("#media").get(0).files[0]; var formData = new FormData(form); //FormData可以一次性获取form表单的全部内容 formData.append("name","名字"); //追加非form表单的内容 formData.append(...
ajax或者form表单提交报404
我今天使用的ajax提交表单,但是弄了好久一直都是404。找了路径没有错直接在地址栏也进不去,再经过一步步探索产生这种原因的是:1、在springMVC配置文件中controller没有扫描到(我这里是因为有个字母打错了)2、改正后又发现我的扫描和开启注解顺序反了,先开启注解再扫描,开启注解需要放到最上面。3、不过还是需要检查下自己的路径,要理清楚项目结构。...
使用jquery的ajax方法提交FormData数据
html> head> title>测试title> meta charset="utf8"> script src="../js/jquery-1.11.3.min.js">script> head> bo
FormData解决ajax上传文件的问题及ajax跨域
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式## 标题 ## UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用
使用jquery的ajax formdata对象提交文件上传
以前的项目大多的使用jquery的插件来进行文件上传,对于就只引用jquery而不使用插件来上传文件之前未有写过,最近项目里有写到和用到,就记录一下,以后方便查找。 提示:存在浏览器皆容问题,谨慎使用。 HTML代码: <form id="infoLogoForm" enctype='multipart/form-data'> <div class=
ajax提交多个对象,使用序列化表单和FormData
model_add model_add2 是连个表单的id var media1 = $('#model_add').serializeObject(); var media2 = $('#model_add2').serializeObject(); var media1JsonString = JSON.stringify(media1); var media2JsonSt
JQuery中使用FormData异步提交数据和提交文件
web中数据提交事件是常常发生的,但是大多数情况下我们不希望使用html中的form表单提交,因为form表单提交会中断当前浏览器的操作并且会调到另一个地址(即使这个地址是当前页面),并且会重复加载一些html浪费带宽,我们希望达到一个无刷新的、异步的提交效果来给用户更好的体验,这时候就要使用ajax,ajax可以不依赖表单自行发起一次http请求并且取回服务器响应的数据,这就是ajax的简便之处
jquery的$.ajax()利用FormData数据类型与php后台交互
可能孤陋寡闻,现在才知道MDN的存在:https://developer.mozilla.org/zh-CN/ 的MDN全名容易理解他是什么意思:MDN Web Docs   好了,自行学习,上一篇讲了jquery的$.ajax()利用json数据类型与php后台交互 那么从MDN上了解到,原来html5中表单数据除了用json数据类型来传给后台,还可以用FormData数据类型来进行传递...
通过$.Ajax()方式上传文件,使用FormData进行Ajax请求,应注意
首先,在 http 中传输文件的问题。起初,http 协议中没有上传文件方面的功能,直到 rfc1867 为 http 协议添加了这个功能。当然在 rfc1867 中限定 form 的 method 必须为 POST , enctype = “multipart/form-data” 以及. 传统提交表单 后面有boundary以及一串字符,这是分界符,后面的一堆字符串是随机生成的,目的是防止上传...
使用FormData进行Ajax请求上传文件到controller层的实现
需求背景: 页面上传一个文件到controller层,然后后台对文件进行处理。文件类型不限。 页面功能展现: 第一步:首先需要两个jar commons-fileupload-1.3.2.jar commons-io-2.4.jar 版本不限: pom文件中相应两个jar: commons-io commons-io 2.4 commons-f
Django通过Ajax利用FormData动态提交表单(包括文件,字符串)
0 需求背景 有的时候我们上传表单,经过后台处理之后再分发回原来页面,这时必定会刷新这个页面。为了解决这个问题,我们采用JS动态提交表单元素,如:file、text等类型,可以很好的解决这一问题。 1 DOM结构 <form id="uploadForm" action="/dongtai/" method="post" enctype=&quo
Js form表单格式化和ajax data在追加(json合并)
如果js中需要将form表单格式化的话,可以使用serializeObject直接格式化如下:var data = $("#saveForm").serializeObject()如果需要往data里填充额外的值,可以使用$.extend进行添加,如下所示:data: $.extend(data,{ysjDm: ywMc,ysjmc: “222”})这种方法这ajax提交的时候使用的比较多...
ajax formdata 提交 页面端返回乱码
//发布企业快讯 function addCpNews(obj){ var formData = new FormData($("#adNewsForm")[0]);     $.ajax({       url:"/comp/addCpNews",          type: 'POST',            data:formData,            async:
jQuery的ajax发送FormData的方式
<!DOCTYPE html> &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form id="form"&gt; &lt;input type="text" name="username"&gt; &lt;input type="file" name="file"&gt; &lt;input type="button" id="btn" value="提交"&gt; &lt;/form&gt; [removed][removed] [removed] var form = $('#form')[0]; // 获取到表单的DOM对象形式 $('#btn').on('click', function () { // 1 使用FormData进行表单的数据处理 var fd = new FormData(form); // 2 使用$.ajax发送fd // 需要指定两个属性 // - processData : false // - contentType : false $.ajax({ method : 'POST', url : '/ajax_Day5/datas03.php', data : fd, success : function (data) { console.log(data); }, processData : false, contentType : false }); }); [removed] &lt;/body&gt; &lt;/html&gt;
form表单上传参数发生400错误
个任学习记录
ajax总结:formdata,get,post,ajax等
ajax总结,load,get,post,ajax总结,还有formdata~~~
FormData进行Ajax请求
通过传统的form表单提交的方式上传文件: [html] view plain copy form id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data">   
ajax传递数组、form表单提交对象数组
在JSP页面开发中,我们常常会用到form表单做数据提交,由于以前一直只是使用form表单提交单个对象,只要表单文本域的name值和接收的对象的属性名一致,那么传值就没有什么问题。不过,在前几天的开发任务中,遇到了需要批量传递对象,也就是需要传递对象数组,在此做个总结。今天又遇到需要向后台传递数组,便一并写下来吧。1、ajax传递普通数组 前台代码var deleteNum= [];//定义要传递
ajax 请求后台数据(及使用FormData对象提交表单及上传图片)
js <script type="text/javascript"> $(function(){ $('#submit').click(function(){ var username = $('#username').val(); var password = $('#passw
【JavaScript】AJAX之程序流程、异步同步请求、FormData类型、事件监听接口
试想这样一种情景,当用户点击页面中的某个按钮向服务器发送请求时,页面本质上只是一些数据发生了变化,而此时服务器却要将重绘的整个页面再返回给浏览器加载,这显然有悖于程序员的“DRY”原则,而且明明只是一些数据的变化却迫使服务器要返回整个HTML文档,这本身也会给网络带宽带来不必要的开销。  有没有办法在页面数据变动时,只向服务器请求新的数据,并且在阻止页面刷新的情况下,动态替换页面中展示的数据呢? –
Ajax使用formData提交带图片上传的表单
记录一下今天踩过的坑。。这么个问题居然搞了快两个小时了。ssm框架,前台form带图片上传,因为效验表单数据,所以不能直接submit。 formDat还是很简单的,有很多加值得方法,后台可以直接用对象接收。 使用ajax提交有很多种方式,说一下使用formDat,直接贴代码。 前端一个form表单,带图片 其实很简单,只需注意几个点。 1、用formData格式传输参数Controll...
采用formdata做跨域的、无刷新、带进度条的文件上传
以前做无刷新上传,都要用iframe,如果想有进度条,就千难万难,不得不用flash等插件来实现。 现在HTML5终于普及了,筒子们不用再那么痛苦了。 所有这一切都变得异常简单!! 不信?且看如下代码: test formdata upload var onProgress = function (e) { if (
React基于FromData+Ajax的表单提交
1.定义表单内容,代码如下 //通过该id="userForm" ,可定位到该表单 //用户名 必须定义name,后台要通过name解析该表单的具体内容 //用户年龄 //上传个人信息文件
关于jQuery使用serializeArray()序列化表单数据,使用FormData()实现AJAX请求的问题
jQuery使用serializeArray()序列化表单数据得到的是一个json对象的数组,而不是真正的json,所以如果对于获取到的结果直接发送给服务器端,服务器端是不能直接通过$_POST[ "]获取到的(服务器端使用PHP语言)。因此需要对serializeArray()获取的数据进行处理
servlet获取ajax post请求中参数以form data和request payload形式传输的方法
HTTP请求中,如果是get请求,那么表单参数以name=value&amp;amp;name1=value1的形式附到url的后面,如果是post请求,那么表单参数是在请求体中,也是以name=value&amp;amp;name1=value1的形式在请求体中。通过chrome的开发者工具可以看到,如下: get请求: RequestURL:http://127.0.0.1:8080/test/test...
用jquery ajax方式提交form表单,出现405错误
出现错误的根本原因: 后台接收的时候,接收文件用的是CommonsMultipartFile.如果表单中一个文件都没有,则会报405错误; 解决方案: 改用MultipartFile方式来接收文件即可错误的代码 @RequestMapping(value = "/apply", method = {RequestMethod.GET, RequestMethod.HEAD, Reques
ajax传文件调用后端接口formdata(不废话,直接上例子用jquery写的)
 $(function(){             $(&quot;#upload&quot;).click(function(){                 var formData = new FormData();                 formData.append('file', $('#file')[0].files[0]); //后端所需字段file                 f...
FormData以及原生Ajax上传图片
Ajax对于表单提交来说,是一个很好的工具,他提供了异步提交的效果,这使得用户提交表单时不需要刷新页面就可获知提交成功与否,但一直以来,网上的示例大都是JQuery上传的教程,原生Ajax似乎并不受大家热爱,更别提原生Ajax上传图片的教程了,本篇将为你讲述JavaScript中使用FormData上传文件的教程 FormData FormData对象用以将数据编译成键值对,以便用XMLHtt...
Ajax利用FormData提交文件和数据
一、ajax提交纯表单(不包含文件或二进制或非ASCII数据)      ajax提交表单绕了很久,遇到一些问题进行测试下以加深理解,测试使用浏览器 49.0.2623.110 m,HTML使用HTML4标准。下文提到的ajax为原生javascript的ajax(脚本化HTTP),都是个人理解,如有错误还望被指正。关于AJAX,XMLHttpRequest,FormData等应该还有许多待
ajax FormData上传文件和数据,上传进度条显示
http://www.jb51.net/article/114003.htm 一、基于input 方式formData上传文件和数据: divclass="startleft describebox">         labelclass="title">商品描述label>             divclass="startleft">        textareacl
使用FormData进行Ajax请求异步上传图片案例
工作时遇到一个对轮播图管理的需求,开发过程遇到些问题,总算顺利解决,记录下来供大家参考。原项目是基于SSM框架搭建的,现将Ajax图片上传部分分享如下: 1.dao层代码 <!-- 新增照片 -->    insert id="addImage"parameterType="Image">               自动生成id(string类型) -->
ajax有图片的提交(用FormData)
function addInfo(me){     $(me).prop(&quot;disabled&quot;,&quot;disabled&quot;);// 避免恶意点击         // 参数         var manager = new FormData();         manager.append(&quot;poster_id&quot;, poster_id);         manager.append(&quot;displ...
使用FormData对象提交表单
这是HTML5中新增的一个Api,他能以表单对象作为参数,自动的把表单的数据打包,当ajax发送数据时,发送这个FormData对象,以达到发送表单数据的目的。创建: 参数是一个form节点对象var fm = document.getElementById('formid'); var fd = new FormData(fm);优点: (1)在以往的ajax做post请求时,当提交的数据比较
angularjs和jquery前端发送以http请求formdata数据
formdata是比较常见的前端发送给后端的请求,不仅可以上传数据,而且同时可以上传文件。 jquery使用http请求上传formdata数据的方法: var formdata = new FormData(); formdata.append('key', 'value'); formdata.append('键', '这边需要是string,不要写json
ajax+formData多文件异步上传
XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个”表单”.比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件. 想要更详细的了解如何使用FormData对象, 请查看
jquery ajax一起提交文件和表单元素(运用FormData)
最近开发遇到要上传文件和表单元素,表单元素是上传文件的描述,要一起上传,这里我探索出来两个可行路径。
解决ajax 传递为空但显示在页面上为undefined 问题
昨天写代码遇到一个问题,这个问题以前也遇到过,只不过那时以为简单就没做什么笔记,结果昨天遇到还是要去查百度,查百度又要找好一会儿,所以就记录一下。避免以后忘记。 首先问题是这样的:我用ajax到动态的做表格插入,从后台传回来一个对象的list集合,然后进行遍历动态的生成表格的行。后台写的都正确的,结果表格有些内容为显示为undefined。后来我调试了一下发现ajax自动的把为空的字段设成了und
通过Ajax方式上传文件,使用FormData进行Ajax请求*
通过传统的form表单提交的方式上传文件: Html代码   form id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data">        h1 >测试通过Rest接口上传文件 h1>
PHP Ajax,FormData收集表单数据(包括文件) 页面无刷新上传文件(提交表单)
一、FormData收集表单数据(包括文件) dom可以获取普通表单域信息,并可以直接提交给服务器 javascript实现附件信息抓取,之前浏览器技术由于有安全方面的限制,也不允许通过js抓取附件信息。 FormData可以实现普通表单域 和 上传文件域 信息的收集。 收集附件信息: dom方式只可以收集普通的表单域信息,并且浏览器由于安全方面的限制也禁止通过javascript语言操
基于springmvc的利用ajax进行表单异步提交(使用FormData方法)
最近学完ssm就找了个oa项目练手,但是发现一个问题,就是用普通的from提交,中间会出现一段空白,用户体验及其不好,就想到了利用ajax进行异步提交,异步提交功能真是强大,在页面不刷新的情况下就能将数据提交到后台,是不是很厉害。但就在了解ajax的同时,发现一个问题,假如一个表单的数据量很大,怎么办?偶然发现,用FormData方法,这个方法更是强大,连文件上传都能实现异步,但就目前发现,不能将...
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 报游戏开发培训班 报大数据班