美文网首页
jsonp跨域返回json格式 Uncaught Syntax

jsonp跨域返回json格式 Uncaught Syntax

作者: Ethan_Walker | 来源:发表于2017-08-28 00:00 被阅读286次

跨域是指从一个域名的网页去请求另一个域名的资源。比如从百度页面去请求google 的资源。
跨域的严格一点的定义是:只要 协议,域名,端口有任何一个的不同,就被当作是跨域。
jsonp跨域原理详细可见该文章: http://kb.cnblogs.com/page/139725/
此问题详解可见该文章:http://blog.csdn.net/wqmain/article/details/8905287

1. 使用jquery 解决跨域

下面说下使用 $.ajax 跨域返回json数据后出现的问题

$(document).ready(function () {
        $('button').click(function () {
            $.ajax({
                type: 'get',
                url: "http://localhost:8080/customer/ajax.action",
                async: false,
                data: {'id': 16},
                dataType: "jsonp",
                jsonp: 'callback',
                jsonpCallback: "fun",
              // 未解析前的json字符串,包括方法名
                dataFilter:function(json){
                    console.log(json);
                    return json;
                },
                success: function (json) {
                    console.log(json);
                },
                error: function () {
                    console.log("错误")
                }
            })
        })

    });

本质上是jquery 生成script脚本:

<script src="http://localhost:8080/customer/ajax.action?id=16&callback=fun" ></script>

向服务器发起请求,但是当服务器返回json 格式的数据时,例如

{
    'name':'ethan',
    'age':12
}

浏览器显示错误:Uncaught SyntaxError: Unexpected token :, 纠结了很久,查资料之后发现,和原生的jsonp 原理一样, 返回的json数据 需要包含在方法中,即通过方法调用传回才可以

本例中服务器返回的数据格式应为:

fun(   {
    'name':'ethan',
    'age':12
}  )

2. 使用 jquery-jsonp 插件跨域

服务器返回字符串格式同上
下载链接: https://github.com/jaubourg/jquery-jsonp/downloads

<script src="jquery.jsonp-2.4.0.min.js"></script>
<script>
    $(document).ready(function () {
        $('button').click(function () {
            $.jsonp({
                url: "http://localhost:8080/customer/jsonp.action",
                async: false,
                data: {'id': 16},
                callbackParameter:'callback',
                // 已经是解析成功后的json数据
                dataFilter:function(json){
                    console.log(json.cust_name);
                    json.cust_name='修改后的name';
                    return json;
                },
                success: function (json) {
                    console.log(json);
                },
                error: function () {
                    console.log("错误")
                }
            })
        })
    });
</script>

相关文章

  • jsonp跨域返回json格式 Uncaught Syntax

    跨域是指从一个域名的网页去请求另一个域名的资源。比如从百度页面去请求google 的资源。跨域的严格一点的定义是:...

  • Ajax请求跨域问题

    遇到ajax请求跨域问题,解决方式,改dataType为jsonp json和jsonp返回数据格式json格式 ...

  • Uncaught SyntaxError: Unexpected

    这几天在跨域问题上遇到了一些难题,需要调用远程数据库的JSON,采用JSONP后产生Uncaught Syntax...

  • $.ajax跨域,服务器返回的是json格式

    ajax跨域使用的是jsonp,返回的数据也应该是jsonp格式({}),但是昨天做了个项目,对方返回的是json...

  • JSONP的劫持

    关于 JSONP JSONP 全称是 JSON with Padding ,是基于 JSON 格式的为解决跨域请求...

  • 关于jsonp劫持

    关于jsonp JSONP 全称是 JSON with Padding ,是基于 JSON 格式的为解决跨域请求资...

  • ajax跨域请求,自定义回调方法名defined。我就呵呵了。

    之前说了,ajax的jsonp跨域请求,返回的是json格式。用了雅虎的YQL才能正确访问,-----$.ajax...

  • 2017-10-13

    JSONP将访问跨域请求变成了执行远程JS代码,服务端不再返回JSON格式的数据,而是返回了一段将JSON数据作为...

  • JSON与JSONP

    JSON和JSONP的区别 简要来说JSON是数据交换格式,JSONP是实现跨域的一种方法 什么是JSON JSO...

  • 对jsonp 的理解认识

    什么是跨域?为什么要跨域呢?听说jsonp能. 为什么jsonp能跨域呢?什么时候使用jsonp?怎么使用json...

网友评论

      本文标题:jsonp跨域返回json格式 Uncaught Syntax

      本文链接:https://www.haomeiwen.com/subject/thiidxtx.html