ajax 学习 无刷新提交表单数据（含文件上传），用formdata

最新推荐文章于 2022-01-06 11:24:20 发布
最新推荐文章于 2022-01-06 11:24:20 发布
阅读量239 收藏
点赞数
分类专栏： web前端 文章标签： javasprict学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41696727/article/details/79325144
版权
报错： 
java.lang.reflect.InvocationTargetException
	at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
	at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:57)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
	at java.lang.reflect.Method.invoke(Method.java:606)
	at com.hy.sty.house.constrol.BaseConstrol.service(BaseConstrol.java:66)
	at javax.servlet.http.HttpServlet.service(HttpServlet.java:742)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:231)

	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
	at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:52)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
	at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:198)
	at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:96)

	at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:504)
	at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:140)
	at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:81)
	at org.apache.catalina.valves.AbstractAccessLogValve.invoke(AbstractAccessLogValve.java:650)
	at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:87)
	at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:342)
	at org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:803)
	at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:66)
	at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:790)
	at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1459)
	at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49)
	at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1145)

	at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:615)
	at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61)
	at java.lang.Thread.run(Thread.java:745)
Caused by: org.springframework.jdbc.BadSqlGrammarException: 
### Error updating database.  Cause: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '' at line 3
### The error may involve com.hy.sty.house.dao.HouseDao.saveHouseInfo-Inline
### The error occurred while setting parameters
### SQL: insert into house     values
### Cause: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '' at line 3
; bad SQL grammar []; nested exception is com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '' at line 3

	at org.springframework.jdbc.support.SQLErrorCodeSQLExceptionTranslator.doTranslate(SQLErrorCodeSQLExceptionTranslator.java:231)
	at org.springframework.jdbc.support.AbstractFallbackSQLExceptionTranslator.translate(AbstractFallbackSQLExceptionTranslator.java:73)
	at org.mybatis.spring.MyBatisExceptionTranslator.translateExceptionIfPossible(MyBatisExceptionTranslator.java:71)
	at org.mybatis.spring.SqlSessionTemplate$SqlSessionInterceptor.invoke(SqlSessionTemplate.java:364)
	at com.sun.proxy.$Proxy21.insert(Unknown Source)

	at org.mybatis.spring.SqlSessionTemplate.insert(SqlSessionTemplate.java:236)
	at org.apache.ibatis.binding.MapperMethod.execute(MapperMethod.java:46)
	at org.apache.ibatis.binding.MapperProxy.invoke(MapperProxy.java:43)
	at com.sun.proxy.$Proxy25.saveHouseInfo(Unknown Source)
	at com.hy.sty.house.service.impl.HouseServiceImpl.saveHouseInfo(HouseServiceImpl.java:30)
	at com.hy.sty.house.service.impl.HouseServiceImpl$$FastClassBySpringCGLIB$$1e47296.invoke(<generated>)
	at org.springframework.cglib.proxy.MethodProxy.invoke(MethodProxy.java:204)
	at org.springframework.aop.framework.CglibAopProxy$CglibMethodInvocation.invokeJoinpoint(CglibAopProxy.java:738)
	at org.springframework.aop.framework.ReflectiveMethodInvocation.proceed(ReflectiveMethodInvocation.java:157)
	at org.springframework.transaction.interceptor.TransactionInterceptor$1.proceedWithInvocation(TransactionInterceptor.java:99)
	at org.springframework.transaction.interceptor.TransactionAspectSupport.invokeWithinTransaction(TransactionAspectSupport.java:282)

	at org.springframework.transaction.interceptor.TransactionInterceptor.invoke(TransactionInterceptor.java:96)
	at org.springframework.aop.framework.ReflectiveMethodInvocation.proceed(ReflectiveMethodInvocation.java:179)
	at org.springframework.aop.framework.CglibAopProxy$DynamicAdvisedInterceptor.intercept(CglibAopProxy.java:673)
	at com.hy.sty.house.service.impl.HouseServiceImpl$$EnhancerBySpringCGLIB$$a3e81b8.saveHouseInfo(<generated>)
	at com.hy.sty.house.constrol.HouseConstrol.add(HouseConstrol.java:218)

	... 28 more
Caused by: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '' at line 3

	at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
	at sun.reflect.NativeConstructorAccessorImpl.newInstance(NativeConstructorAccessorImpl.java:57)
	at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:45)
	at java.lang.reflect.Constructor.newInstance(Constructor.java:526)
	at com.mysql.jdbc.Util.handleNewInstance(Util.java:411)
	at com.mysql.jdbc.Util.getInstance(Util.java:386)
	at com.mysql.jdbc.SQLError.createSQLException(SQLError.java:1052)
	at com.mysql.jdbc.MysqlIO.checkErrorPacket(MysqlIO.java:4096)
	at com.mysql.jdbc.MysqlIO.checkErrorPacket(MysqlIO.java:4028)
	at com.mysql.jdbc.MysqlIO.sendCommand(MysqlIO.java:2490)
	at com.mysql.jdbc.MysqlIO.sqlQueryDirect(MysqlIO.java:2651)
	at com.mysql.jdbc.ConnectionImpl.execSQL(ConnectionImpl.java:2683)
	at com.mysql.jdbc.PreparedStatement.executeInternal(PreparedStatement.java:2144)
	at com.mysql.jdbc.PreparedStatement.execute(PreparedStatement.java:1379)
	at com.mchange.v2.c3p0.impl.NewProxyPreparedStatement.execute(NewProxyPreparedStatement.java:989)
	at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
	at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:57)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
	at java.lang.reflect.Method.invoke(Method.java:606)

	at org.apache.ibatis.logging.jdbc.PreparedStatementLogger.invoke(PreparedStatementLogger.java:55)
	at com.sun.proxy.$Proxy31.execute(Unknown Source)
	at org.apache.ibatis.executor.statement.PreparedStatementHandler.update(PreparedStatementHandler.java:41)
	at org.apache.ibatis.executor.statement.RoutingStatementHandler.update(RoutingStatementHandler.java:66)
	at org.apache.ibatis.executor.SimpleExecutor.doUpdate(SimpleExecutor.java:45)
	at org.apache.ibatis.executor.BaseExecutor.update(BaseExecutor.java:100)
	at org.apache.ibatis.executor.CachingExecutor.update(CachingExecutor.java:75)
	at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
	at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:57)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
	at java.lang.reflect.Method.invoke(Method.java:606)
	at org.apache.ibatis.plugin.Plugin.invoke(Plugin.java:59)
	at com.sun.proxy.$Proxy29.update(Unknown Source)
	at org.apache.ibatis.session.defaults.DefaultSqlSession.update(DefaultSqlSession.java:148)
	at org.apache.ibatis.session.defaults.DefaultSqlSession.insert(DefaultSqlSession.java:137)
	at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
	at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:57)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
	at java.lang.reflect.Method.invoke(Method.java:606)
	at org.mybatis.spring.SqlSessionTemplate$SqlSessionInterceptor.invoke(SqlSessionTemplate.java:354)
	... 45 more

js代码：

//提交按钮的单击事件
	$("#button").click(function(){
		$("#button").find("~span").remove();
		var name=document.getElementById("form");//得到表单数据
		var formData = new FormData(name);//创建formdata对象
		$.ajax({ 
			url : "add.house", //路劲
			type : "POST", //类型
			data : formData, //参数
			// 告诉jQuery不要去处理发送的数据
			processData : false, 
			// 告诉jQuery不要去设置Content-Type请求头
			contentType : false,
			/*beforeSend:function(){
			console.log("正在进行，请稍候");
			},*/
			success : function(falg) { 
			if(falg.match(/ok/)){//判断返回的是OK或no
			document.location.href="page/guanli.jsp";
			}else{
				$("#button").after("<span>发布失败</span>");
				
			}
			}, 
			error : function(responseStr) { 
				$("#button").after("<span>发布失败</span>");
			} 
			});
	});

经过排查发现是 表单form没有id 导致name是空

<form  method="post" enctype="multipart/form-data" >

改正：

<form  method="post" enctype="multipart/form-data" id=form>

忄_I_miss_you
关注
专栏目录
Asp无组件上传,表单值和文件可以分别保存到数据库和文件夹
06-13
Asp无组件上传,表单值和文件可以分别保存到数据库和文件夹
通过Ajax使用FormData对象无刷新上传文件方法
01-21
写在前面：本文说的这个方案有浏览器兼容性问题；所有主流浏览器的较新版本已经支持这个对象了，比如Chrome 7+、...②把表单serialize()序列化用Ajax的方式提交，也无法把上传文件的文件流进行序列化，也不行 我现有
服务器解析form中文件,客户端解析服务器响应的multipart/form-data数据
weixin_40009472的博客
08-03 634
multipart/form-data，多部件请求体。这个请求体比较特殊，它可以拆分为多个部件，每个部件都有自己的header和body，最常用的地方就是：客户端文件上传，因为有多个部件，在上传文件的时候，还可以在body中添加其他的数据。json，form。。。一般来说，都是客户端发起multipart/form-data请求 ，服务器进行解析。而且这种东西的编码解码工作一般都是由底层的容器/框...
formData的实现
weixin_34405332的博客
05-22 125
参考:https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=U...
2020-08-09
weixin_47250135的博客
08-09 102
文献种类：专题技术总结文献； 知识点总结: 一. 1.使用JQuery Ajax发送FormData数据 构建FormData数据 var from=new FormData(); 使用JQuery发送FormData数据 processData: false, 告诉jQuery不要去处理发送的数据 contentType: false, 告诉jQuery不要去设置Content-Type请求头 发送请求 (1)window.location.href = “/Main/Main”; window
图片上传时的冲突
weixin_47253648的博客
08-18 199
图片上传时的冲突 1.  在写代码的时候，为了方便且减少代码量，能重复使用的代码，通常都会将代码封装起来重复使用；封装时，形参代替实参，实参又表示形参； 2.  在同一个页面中，新增图片的ID，与修改图片的ID，不可使用同一个； 3.  新增与修改的获取数据信息以及回填数据的ID，也不可为同一个； 4.  因为ID选择器具有唯一性； 图片的提交问题 1.  无论是新增图片还是修改图片，在提交时，都不可使用jQuery已封装好的$.post(); 2.&nbs
Ajax+FormData+javascript实现无刷新表单信息提交
10-21
在前端开发中ajax，formdata和js实现无刷新表单信息提交非常棒，接下来通过本文给大家介绍Ajax+FormData+javascript实现无刷新表单信息提交的相关资料,需要的朋友可以参考下
ajax(iframe)无刷新提交表单、上传文件
12-10
这里我们将详细讲解如何使用ajax(iframe)方式来无刷新提交表单并上传文件。 首先，我们来看HTML部分。在HTML代码中，我们创建了一个包含文件输入字段的表单，以及一个隐藏的iframe。表单的`action`属性指向处理表单...
Ajax提交Form表单及文件上传的实例代码
12-02
在网页开发中，表单提交是一项...总之，通过Ajax提交表单和文件上传，我们可以实现无刷新的用户体验，提高应用的交互性和性能。记住，使用Ajax时要考虑跨域安全、错误处理、进度显示等问题，确保功能的完整性和稳定性。
npm 安装包的时候我们经常 遇见 -s -D -g 之类的后缀 他们都是什么意思呢？
Leon_940002463的博客
09-05 4012
npm 安装包的时候我们经常 遇见 -s -D -g 之类的后缀 他们都是什么意思呢？ 这里用一段简单的话来概述： -S -save 的缩写 用于生产（上线）环境下，包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在； -D -dev（生产） 包名会被注册在package.json的devDepende...
关于文件上传踩过的坑multipart/form-data
热门推荐
Gin
04-29 4万+
1.content-type multipart-formdata:常用的文件上传请求编码格式 application/x-www-urlencoded:默认的字符编码格式，用于上传表单，多用于文本，上传文件较慢         可在form中的enctype设置，或在ajax中设置contentye 2.上传方式 1.使用formdata，formdata可在new时传入表单，
SpringMVC的Controller接口方法参数解析
09-22 949
SpringMVC的Controller接口方法参数解析的过程与分析，常用注解RequestParam，PathVariable，ModelAttribute的使用，自定义对象和集合类型参数的解析。
Vue实现文件上传（参数名称：file；请求格式：formData）
SunPeng的博客
01-06 6727
1、后端接口文档： 导入：POST /import [http:-192.168.1.1-%.....xlsx] 2、前端API获取： //导入 export function eventImport(obj) { return request({ url: '/api/accident/import', method: 'post', data: obj }) } 3、前端页面： <el-button type="prim
文件各种上传，离不开的表单
weixin_33762130的博客
07-24 140
作为程序员的我们，经常会要用到文件的上传和下载功能。到了需要用的时候，各种查资料。有木有..有木有...。为了方便下次使用，这里来做个总结和备忘。 利用表单实现文件上传 最原始、最简单、最粗暴的文件上传。 前端代码： //方式1 &lt;form action="/Home/SaveFile1" method="post" enctype="multipart/form-data"&gt; ...
formdata对象_FormData对象
cuk0051的博客
08-29 384
formdata对象The FormData object is used to hold form values in a key-value pairs data structure. FormData对象用于在键值对数据结构中保存表单值。 You create an empty FormData object in this way: 您可以通过以下方式创建一个空的FormData对...
jquery实战总结
lizhixiong2的专栏
06-02 360
jquery实战总结
Java开发：Ajax文件上传及表单数据提交教程
以下是一个简单的示例，展示了如何在JSP页面中创建一个文件上传表单，并使用JavaScript处理Ajax提交： ```jsp ;charset=UTF-8" pageEncoding="UTF-8" %> <!DOCTYPE html> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值