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. (译)开发优秀的虚拟现实体验：从开发I Expect You to Die中总结的六个要点

    这篇文章是我从网上找来的,我觉得他非常详细的解释了VR发展的需求和必要.我认为通过这篇文章可以让大家了解VR. 译者写在最前: 来到追光动画有好几个月了,抱歉这段时间也没有什么文章与大家分享,我现在在 ...

  2. DDD领域驱动设计之运用层代码

    1.DDD领域驱动设计实践篇之如何提取模型 2.DDD领域驱动设计之聚合.实体.值对象 3.DDD领域驱动设计之领域基础设施层 4.DDD领域驱动设计之领域服务 5.整体DEMO代码 什么是运用层,说 ...

  3. RabbitMQ（二） -- Work Queues

    RabbitMQ(一) -- Work Queues RabbitMQ使用Work Queues的主要目的是为了避免资源使用密集的任务,它不同于定时任务处理的方式,而是把任务封装为消息添加到队列中.而 ...

  4. [ThingWorx] Install Guideline

    环境 硬件 软件 安装过程 PostgreSQL Tomcat ThingWorx

  5. C++ Primer 变量和基本类型

    <C++ Primer 4th>读书摘要 基本上所有的语言都要提供下列特征: • 内置数据类型,如整型.字符型等. • 表达式和语句:表达式和语句用于操纵上述类型的值. • 变量:程序员可 ...

  6. SQL——字符串处理函数

    1) ASCII Format:ASCII ( character_expression ) Function:返回表达式最左端字符的ASCII值. eg: select ASCII('abcdef' ...

  7. Atitit. C# java 的api 目录封装结构映射总结

    Atitit. C#  java 的api 目录封装结构映射总结 C# java ref System.Reflection System.Type, java.lang.ref concurrent ...

  8. paip.自动import的实现跟java.lang.SecurityException Prohibited package name java

    paip.自动import的实现跟java.lang.SecurityException Prohibited package name java #-----自动import 因为java.lang ...

  9. paip.前端加载时间分析之道优化最佳实践

    paip.前端加载时间分析之道优化最佳实践 1.另存为 ,查看文件尺寸..和图片. 2.view the 另存为的htm静态的文件单个的加载,看时间...可以排除编程语言的问题and 数据库.. ## ...

  10. Alfred 使用简介

    1.安装(不说了去 Google 吧) 2.基础快捷键:option+space 3.打开应用程序:Alfred 几乎是一切程序的入口,你再也不需要找妈妈要开始菜单了.用快捷键呼出Alfred,输入任 ...