蛋疼的JSONP

最新推荐文章于 2025-05-14 00:03:12 发布

weixin_34304013

最新推荐文章于 2025-05-14 00:03:12 发布

阅读量51

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/150705/blog/191540

2019独角兽企业重金招聘Python工程师标准>>>

test.php内容如下：

<?php
echo '["hello", "yes"]';

test.html内容如下：

<!DOCTYPE html>
<html>
  <head>
    <title>TEST</title>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>   
       <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
  </head>
  <body>
      <button id="test">TEST</button>
      <script>
          $(function(){
            $("#test").click(function(){  
              $.ajax({
                  type: 'POST',                    
                  url: 'http://xxxx.com/test.php',
                  data: 'text=你叫什么名字？',
                  dataType:'JSONP',
                  complete: function(data, status){
                    var json = $.parseJSON(data.responseText);                       
                    console.log('data: ' + json[0]);
                  }               
              }); 
            });
          });
      </script>
  </body>
</html>

如上，test.php和test.html都放在xxxx.com

访问xxxx.com/test.html点击test按钮，结果是：

data: hello

符合预期结果。

把test.html放在oooo.com，以实现跨域AJAX，访问oooo.com/test.html点击按钮则显示：

TypeError: json is null

console.log('data: ' + json[0]);

非常蛋疼。。。。

看了一些资料有点明白了，所谓的jsonp，并不是一种数据格式而是在json串前添加一个script标签，然后src指向那个url，见下文：

http://bbs.youkuaiyun.com/topics/390459676

因为本地请求并非跨域，所以直接返回json串没有额外添加什么标签，所以可以正常解析，但是跨域的时候返回的是非标准json串，所以解析之后不正确。

转载于:https://my.oschina.net/u/150705/blog/191540