数据格式

我最近在使用JQuery的$.ajax访问后台的时候,发现竟然无法解析返回的数据,具体的错误记不清了(以后在遇到问题先截个图),可以在浏览器的Console中看到一个错误,但是去看这条请求是有数据返回的,所以刚开始我一直以为是Ajax写的不对,但是这个Ajax也并不是很复杂,实在搞不懂了。

还好这个url可以通过get方式访问,所以我当时直接在浏览器地址栏访问,发现是有数据返回的,但是这个数据的方式很奇怪,因为现在的浏览器都会对JSON数据进行格式化显示,但是这段数据的格式并非JSON的显示样式,反而是XML的方式显示的,这就奇怪了,明明说的都是通过JSON格式交互的,这是什么情况?我看后台代码之后发现他们使用的是@RestController (springMVC 的 org.springframework.web.bind.annotation.RestController)注解,而不是使用的@ResponseBody (使用RestController会告诉SpringMVC使用信息转换器,就可以不使用@ResponseBody注解,而是SpringMVC通过请求头的Accept属性判断,而有些时候这个值会是application/xml,所以会生成XML格式数据),我先没有修改这些后台代码,而是将JQuery中Ajax的dataType属性(dataType属性可以手动设置为json)指定为json,这些数据就可以正常被解析了。

唉,之后写Ajax还是可以加上dataType属性吧。后来,我修改后台代码,设置response的ContentType (使用response.setContentType(type))为application/json;charset=utf-8也是可以被前端正常解析的(哪怕不使用dataType)。

        $.ajax({
url:'',
type:'get',
//设置Accept 预期服务器返回的数据类型
dataType:'json',
//contentType 可以指定发送给服务器的数据格式
contentType:'application/json;charset=utf-8',
data:{}
});

跨域问题

因为有些数据是需要访问其他的应用才可以获得的,所以就涉及到跨域的问题,处理跨域的问题有两种:

第一种:使用JSONP来处理跨域问题,只需要将dataType设置为jsonp即可(只支持GET方式的请求,因为其底层使用的的是js添加script标签,并设置script的src属性值,所以只能是GET方式)

 $.ajax({
url: 'http://localhost:8080/testJsonp',
dataType: "jsonp",
success: function (data) {
console.log(data)
}
})

这种方式不用修改后台的代码,但是并不一定可以100%解决跨域问题,现象就是:请求响应都很正常(200),而且在浏览器调试工具中也有数据返回,就是拿不到数据,还会报一个数据格式不正确(是多一个还是少一个,号的问题)这个时候需要使用CORS方式。

如果数据量过大,使用GET方式就不太好了,因为URL长度有限制,这个时候也需要使用CORS方式

方法二:CORS,跨域资源共享。修改后台的代码,添加响应头

  response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,OPTIONS");
response.setHeader("Access-Control-Allow-Credentials", "true");

这种方式可以解决绝大部分跨域问题,但是就是需要修改后台代码

使用Ajax解析数据遇到的问题的更多相关文章

  1. Ajax--PHP+JQuery+Ajax解析json、XML数据、加载页面

    一.JQuery+Ajax用get.post方式提交和请求数据 知识要点: $('#userName').blur(function () { var txt = $(this).val(); $.a ...

  2. ThinkPHP中ajax提交数据

    最近在做项目时遇到了一些需要从页面用ajax提交数据到后台的操作,无奈本人技术有限,网上苦寻,研究了一下ajax和thinkPHP的结合,黄天不负苦心人,终于搞定了. 闲话少叙,进入正题:我需要从页面 ...

  3. 用Nodejs+Express搭建web,nodejs路由和Ajax传数据并返回状态,nodejs+mysql通过ajax获取数据并写入数据库

    小编自学Nodejs,看了好多文章发现都不全,而且好多都是一模一样的 当然了,这只是基础的demo,经供参考,但是相信也会有收获 今天的内容是用Nodejs+Express搭建基本的web,然后呢no ...

  4. form表单提交数据,页面必定会刷新,ajax提交数据不会刷新,做到悄悄提交,多选删除,ajax提交实例

    很多页面用到的模态对话框,如知明网站https://dig.chouti.com/的登录页都是模态对话框, 当点登录时,是用的ajax提交,因为输入错了信息,有返回消息,而页面没有刷新. jquery ...

  5. [NodeJs] 用Nodejs+Express搭建web,nodejs路由和Ajax传数据并返回状态,nodejs+mysql通过ajax获取数据并写入数据库

    小编自学Nodejs,看了好多文章发现都不全,而且好多都是一模一样的 当然了,这只是基础的demo,经供参考,但是相信也会有收获 今天的内容是用Nodejs+Express搭建基本的web,然后呢no ...

  6. 使用js接收ajax解析的json再拼成一个自己想要的json

    //ajax解析的json{ "status": 1, "content": { "pathsInfo": [ { "id&quo ...

  7. h5-localStorage实现缓存ajax请求数据

    使用背景:要实现每次鼠标hover“能力雷达”,则显示能力雷达图(通过ajax请求数据实现雷达图数据显示),所以每次hover都去请求ajax会影响性能,因此这里要用到本地缓存. 实现: 此处是通过传 ...

  8. Android之三种网络请求解析数据(最佳案例)

    AsyncTask解析数据 AsyncTask主要用来更新UI线程,比较耗时的操作可以在AsyncTask中使用. AsyncTask是个抽象类,使用时需要继承这个类,然后调用execute()方法. ...

  9. vue 中使用 AJAX获取数据的方法

    在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascri ...

随机推荐

  1. getaddrinfo()详解

    IPv4中使用gethostbyname()函数完成主机名到地址解析,但是该API不允许调用者指定所需地址类型的任何信息,返回的结构只包含 了用于存储IPv4地址的空间.为了解决该问题,IPv6中引入 ...

  2. mybatis分页查询

    方式1: select * from table order by id limit m, n; 该语句的意思为,查询m+n条记录,去掉前m条,返回后n条记录.无疑该查询能够实现分页功能,但是如果m的 ...

  3. [置顶] flume高并发优化——(15)中间件版本升级

    在系统平稳运行一年的基础上,为提供更好的服务,现针对java,kafka,flume,zk,统一进行版本升级,请各位小伙伴跟着走起来,不要掉队啊! 名称 老版本号 新版本号 jdk 1.7.0_25 ...

  4. Android深入理解JNI(一)JNI原理与静态、动态注册

    前言 JNI不仅仅在NDK开发中应用,它更是Android系统中Java与Native交互的桥梁,不理解JNI的话,你就只能停留在Java Framework层.这一个系列我们来一起深入学习JNI. ...

  5. 关于windows完成端口(IOCP)的一些理解

    本人很多年前接触完成端口以来,期间学习和练习了很多次,本以为自己真正地理解了其原理,最近在看网狐的服务器端源码时又再一次拾起完成端口的知识,结果发现以前理解的其实很多偏差,有些理解的甚至都是错误的.网 ...

  6. MPAndroidChart Wiki(译文)~Part 4

    16. 动画 注意:本章的动画效果只会在API 11(Android3.0.x)及以上的Android版本上生效 在低于上述的Android版本中,动画将不会被执行,并不会导致程序崩溃. 所有类型的图 ...

  7. java android 读写三菱PLC 使用TCP/IP 协议

    本文将使用一个Github开源的组件库技术来读写三菱PLC和西门子plc数据,使用的是基于以太网的TCP/IP实现,不需要额外的组件,读取操作只要放到后台线程就不会卡死线程,本组件支持超级方便的高性能 ...

  8. BZOJ5281: [Usaco2018 Open]Talent Show(01分数规划&DP)

    5281: [Usaco2018 Open]Talent Show Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 166  Solved: 124[S ...

  9. Java 输出文件通过 BufferedWriter.newline() 方法换行

    最近项目中需要导出文件,其实导出文件是一个挺简单的事情.但是却遇到了很奇怪的问题. 首先导出到文件需要用到 BufferedWriter.而换行则是通过 bw.newline() 方法,问题将出在 n ...

  10. bzoj 5334 数学计算

    bzoj 5334 数学计算 开始想直接模拟过程做,但模数 \(M\) 不一定为质数,若没有逆元就 \(fAKe\) 掉了. 注意到操作 \(2\) 是删除对应的操作 \(1\) ,相当于只有 \(1 ...