zoukankan      html  css  js  c++  java
  • 使用Ajax解析数据遇到的问题

    数据格式

    我最近在使用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");

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

  • 相关阅读:
    初始化生成linux sysfs(8)
    内存延迟监控系统组件
    数组代码First Missing Positive
    类文件Spring中空值的写法java教程
    状态键盘完美适应iOS中的键盘高度变化
    框架绑定JavaScript MVC框架PK:Angular、Backbone、CanJS与Ember
    域编码jquery的AJAX跨域请求及跨域请求的原理
    数据格式利用GSON接卸JSON数据
    网元查看一个无厘头的core dump问题定位
    类型应用oracle如何显示毫秒?
  • 原文地址:https://www.cnblogs.com/lz2017/p/8361030.html
Copyright © 2011-2022 走看看