Jquery使用ajax方法实现jsonp跨域请求数据的时候报错 “Uncaught SyntaxError: Unexpected token :”，主要问题在于返回的数据格式不正确

本地虚拟两个域名，分别为：www.test.com、www.abc.com

http://www.test.com/index.html页面点击按钮，请求返回 www.abc.com域名目录下的文件的数据 ，其代码为：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8" />

  <title>JSONP跨域请求</title>

  <script src="http://www.oschina.net/js/2012/jquery-1.7.1.min.js" type="text/javascript"></script>

  <script type="text/javascript">

  	$(function(){

      $(".button").on("click",function(){

        $.ajax({

          type:"get",

          url:"http://www.abc.com/json.php",

          dataType:"jsonp",

          jsonp:"callback",

          jsonpCallback:"success_jsonpCallback",

          success:function(json){

            $(".user").html("用户信息："+json.username+","+json.age+","+json.gender);

          },

          error:function(){

            alert("请求出错！");

          }

        });

      });

  	});

  </script>

</head>

<body>

  <button class="button">点击获取数据</button>

  <div class="user"></div>

</body>

</html>

http://www.abc.com/json.php文件代码为：

<?php

$arr = array ('username'=>'jack','age'=>21,'gender'=>'male');

echo json_encode($arr);

?>

在Chrome浏览器调试会发现报错了，如图：

json.php返回的数据确实是json类型的数据 {“username”:”jack”,”age”:21,”gender”:”male”} ，问题处在哪？

翻看了一下Jquery文档发现jsonp:”callback”, jsonpCallback:”success_jsonpCallback”,传递这两个参数是有原因的，jsonp的返回数据格式应该是: “客户端传递的回调方法名称(json数据)”，将php文件改为：

<?php

$arr = array ('username'=>'jack','age'=>21,'gender'=>'male');

echo $_GET['callback']."(".json_encode($arr).")";

?>

测试，正确返回结果，如下图：

可以看到，php文件返回的结果是 success_jsonpCallback({“username”:”jack”,”age”:21,”gender”:”male”}) ，这才是正确的jsonp返回格式，而 success_jsonpCallback这是传递过去的参数 。

JSONP跨域请求数据报错 “Unexpected token :”的解决办法的更多相关文章

  1. ajax跨域请求 Uncaught SyntaxError: Unexpected token ：

    最近使用前后端分离开发项目比较多,经常碰到的一个问题就是,前端静态页面请求,后端api获取数据,很多时候,前端和后端都不是在同一个域下的(协议,域名,端口). 这里使用的是ajax请求,因为浏览器的同 ...

  2. java Ajax跨域请求COOKIE无法带上的解决办法

    1.web.xml加入以下节点,,一定放在第一个filter <!--目录下所有文件可以跨域Begin--> <filter> <filter-name>CorsF ...

  3. Ajax跨域请求COOKIE无法带上的解决办法

    原生ajax请求方式: var xhr = new XMLHttpRequest(); xhr.open("POST", "http://xxxx.com/demo/b/ ...

  4. PHP后台处理jQuery Ajax跨域请求问题 — xx was not called解决办法

    // 前台代码 $.ajax({ url: 'http://www.ushark.net/home/save_trial_apply', dataType: 'jsonp', processData: ...

  5. 使用jsonp跨域请求

    一.异步对象,不能实现跨域请求 在站点A中访问站点B的数据: 站点A代码: window.onload = function () { document.getElementById("bt ...

  6. Django学习---jsonp跨域请求

    jsonp跨域请求 我们通过ajax进行跨域请求的时候,请求发送过去,但是在接受返回数据的时候浏览器会进行拦截. 这是由于浏览器存在同源策略机制,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源 ...

  7. .net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器

    1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...

  8. jQuery ajax的jsonp跨域请求

    一直在听“跨域跨域”,但是什么是跨域呢?今天做了一些了解.(利用jQuery的jsonp) jQuery使用JSONP跨域 JSONP跨域是利用script脚本允许引用不同域下的js实现的,将回调方法 ...

  9. jsonp跨域请求响应结果处理函数(python)

    接口测试跨域请求接口用的jsonp,需要将回调函数里的json字符串提取出来. jsonp跨域请求的响应结果格式: callback_functionname(json字符串). #coding:ut ...

随机推荐

  1. Android---组件篇---Handler的使用（1）[转]

    在android中,有很多功能是不能放在onCreate或者onStart方法里面,因为这些功能相对 来说费时比较长,比如说下载一个文件,下载的过程比较长,但是如果写在Activity中, 那么这段时 ...

  2. 开启Github之旅

    在那个远古时代,我以为可以用GoogleCode干点事,结果啥也没干好.如今,Github已经成为了业界标杆,就连Google.微软.Facebook的开源项目都往Github搬.Github作为全球 ...

  3. [RabbitMQ] Connection failed

    RabbitMQ.Client.Exceptions.BrokerUnreachableException: None of the specified endpoints were reachabl ...

  4. atitit. 浏览器插件 控件 applet 的部署，签名总结 浏览器 插件 控件 的签名安全机制o9o

    atitit. 浏览器插件 控件   applet 的部署,签名总结 浏览器 插件 控件 的签名安全机制o9o 1. 服务器部署签名 1 2. 签名流程::生成密钥..导出cert正书,签名 1 3. ...

  5. Atitit.列表页面and条件查询的实现最佳实践(1)------设置查询条件and提交查询and返回json数据

    Atitit.列表页面and条件查询的实现最佳实践(1)------设置查询条件and提交查询and返回json数据 1. 1. 配置条件字段@Conditional 1 1 2. 2. 配置条件字段 ...

  6. HTML5语义元素

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. [mongodb-10gen]ubuntu下安装方法

    由于自己老是不死心,所以还是继续在UBUNTU下开始我的GOLANG,今天发现服务源很快一下子就把GO的源代码从GoogleProject上给hg回来了,所以今天才查了一下在UBUNTU下安装Mong ...

  8. android如何播放和录制音频

    视频录制功能正在走来,在Androidsdk中有与之相关的类:android.media.MediaRecorder.当然,因为模拟器上没有提供必要的硬件设施,所以在学习过程中并不能实现.Media能 ...

  9. Page和UserControl的事件加载顺序

    UC OnInitPage OnInit Page Page_LoadPage OnLoad UC Page_LoadUC OnLoad Page OnPreRenderUC OnPreRender

  10. Mac地址绑定的wifi

    可以仿冒mac地址连接到wifi. 1.首先使用cdlinux扫描ssid,抓握手包--当捕获某个连接该wifi的client的时候,记下该client的mac地址. 2.用eswa解码抓包文件,获取 ...