Ajax发送POST请求的心路历程
2015-12-31 15:31
176 查看
好多年前就在项目中用ajax实现了页面部分数据的发送,当时用的是GET方法。
这次用POST方法实现同样的功能,竟然花费了不少的时间!
① 关于JQuery ajax的配置项说明
配置请求数据类型为:
contentType: "application/json;charset=utf-8",额……问题来了。
② 415 Unsupported Media Type
这是响应的错误码,直译就是不支持的媒体类型。既然是服务器响应的,那就是说服务器不支持媒体类型。
我配置的数据类型为json,用的Spring MVC,那就是需要增加Spring的json数据支持。
查询对比了一下,发现jackson库是JSON封装解析效率比较高,开发比较活跃的库。
③ 下载jackson库
从好几个mvn仓库中下载的版本竟然是错误的,弄的我差点开始怀疑人生。
最后还是从官网连接的仓库中下载了正确的版本。
④ 400 Bad Request
新的错误来了,服务器响应“坏的请求”。
服务器的报错信息如下:Unrecognized token 'name': was expecting ('true', 'false' or 'null')
从浏览器抓包如下:
找到原因了,就是说服务器根据请求消息携带的媒体类型json做好了解析JSON数据的准备,然而找不到相关的数据键,因为事实上浏览器发出去的请求确实不是JSON格式的数据啊。
我是这么填写的数据:
data : {'name':'test','passwd':'123456'},
就是说这么写看起来是JSON格式,事实上不是。那就明确一下数据格式吧,改动如下:
哈哈,终于前后台打通了~~~~
⑤ 完整的JS代码如下,友情提示:纸上得来终觉浅,绝知此事要躬行。
后记:
想让返回数据类型更加丰富,修改dataType为“json”。
结果发现无法跳转到success的回调函数。
既然不能调用success,那就看error回调函数吧:
最终原因如下:因为服务器返回的数据格式不是标准json,所以无法进入success。
这次用POST方法实现同样的功能,竟然花费了不少的时间!
① 关于JQuery ajax的配置项说明
url : 请求的url。 type : http请求消息的方法,例如get,post等。 contentType : http请求消息的数据类型,例如json,text,xml等。 dataType : http响应消息的数据类型,可以不配置。
配置请求数据类型为:
contentType: "application/json;charset=utf-8",额……问题来了。
② 415 Unsupported Media Type
这是响应的错误码,直译就是不支持的媒体类型。既然是服务器响应的,那就是说服务器不支持媒体类型。
我配置的数据类型为json,用的Spring MVC,那就是需要增加Spring的json数据支持。
查询对比了一下,发现jackson库是JSON封装解析效率比较高,开发比较活跃的库。
③ 下载jackson库
从好几个mvn仓库中下载的版本竟然是错误的,弄的我差点开始怀疑人生。
最后还是从官网连接的仓库中下载了正确的版本。
理论上除了导入jackson库,还需要适当的配置让Spring支持JSON解析。 但是一个<context:annotation-config />配置就自动的完成了相关配置。 省事了,也会让人有些疑惑。凡事没有绝对吧。
④ 400 Bad Request
新的错误来了,服务器响应“坏的请求”。
服务器的报错信息如下:Unrecognized token 'name': was expecting ('true', 'false' or 'null')
从浏览器抓包如下:
Request Payload name=test&passwd=123456
找到原因了,就是说服务器根据请求消息携带的媒体类型json做好了解析JSON数据的准备,然而找不到相关的数据键,因为事实上浏览器发出去的请求确实不是JSON格式的数据啊。
我是这么填写的数据:
data : {'name':'test','passwd':'123456'},
就是说这么写看起来是JSON格式,事实上不是。那就明确一下数据格式吧,改动如下:
data : JSON.stringify({'name':'test','passwd':'123456'}),
哈哈,终于前后台打通了~~~~
⑤ 完整的JS代码如下,友情提示:纸上得来终觉浅,绝知此事要躬行。
$(document).ready(function() { $("#submitBtn").click(function(e) { e.preventDefault(); var obj = $(this); var name = $("input[name='loginname']").val(); var passwd = $("input[name='loginpasswd']").val(); $.ajax({ url : "http://localhost:8080/star/loginCheck/", type : "POST", contentType: "application/json;charset=utf-8", data : JSON.stringify({'name':name,'passwd':passwd}), dataType : "text", success : function(result) { if (result == "success") { obj.parents('form').submit(); } else { } }, error:function(msg){ $(".notice").html('Error:'+msg); } }) return false; }) }); </script>
后记:
想让返回数据类型更加丰富,修改dataType为“json”。
结果发现无法跳转到success的回调函数。
既然不能调用success,那就看error回调函数吧:
Error:SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
最终原因如下:因为服务器返回的数据格式不是标准json,所以无法进入success。
相关文章推荐
- tyvj p1008 传球游戏
- android基础:android页面添加滚动条
- 【Android】 加解密算法 HMAC 的使用
- 自定义控件例如LinearLayout 的三种方法
- 第<3>章 Typeglob和符号表
- 03:求整数的和与均值
- [Linux] 查看jar包内容
- 1217递归下降语法分析程序设计
- Android编程动态修改RelativeLayout宽高的方法
- Click事件在显示和隐藏中的BUG
- VisualC# winform窗体应用程序 语句加this有的怎么不加?
- 论一个职业讲师的自我修养
- python实现嵌套列表、字典按某一元素去重复
- 微信公众平台开发实战Java版之微信获取用户基本信息
- ASCII、ANSI、MBCS、UNICODE字符集详解
- Java实战应用:MyBatis实现单表的增删改
- 程序员关于提高工作效率
- 让Sublime Text3在编写的文件快速在浏览器打开
- MySql动态生成SQL并执行
- VNC的使用