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. Web服务器优化

    系统 1. 修改远程默认端口 2. Raid5 3. IIS 1. 默认文档,仅保留一个有效的. 2. 数据库 1. 更改默认端口 2. 如果一台服务器,禁用网络登录

  2. Agile 是什么？

    也许你已经习惯了 “Agile” 这个词汇不断地在你耳边狂轰滥炸,诸如敏捷团队.敏捷UX.敏捷建模.敏捷需求管理.敏捷架构等等.而且,人们还在不断的将 “Agile” 和更多的词汇进行组合,比如,也曾 ...

  3. Atitit. 构造ast 语法树的总结attilax v2 q0f

    Atitit. 构造ast 语法树的总结attilax v2 q0f 1. Ast结构树形1 2. ast view (自是个160k的jar )2 2.1. 多条语句ast结构2 2.2. 变量定义 ...

  4. Leetcode 231 Power of Two 数论

    同样是判断数是否是2的n次幂,同 Power of three class Solution { public: bool isPowerOfTwo(int n) { ) && ((( ...

  5. FreeCodeCamp 高级算法（个人向）

    freecodecamp 高级算法地址戳这里. freecodecamp的初级和中级算法,基本给个思路就能完成,而高级算法稍微麻烦了一点,所以我会把自己的解答思路写清楚,如果有错误或者更好的解法,欢迎 ...

  6. 用非管理员权限启动主程序，并用管理员权限启动子程序，导致WM_COPYDATA消息发送失败的问题

    问题描述 :     用非管理员权限启动dzh,dzh再启动dtssm,由于dtssm的配置文件app.manifest 中设置了requireAdministrator,导致dtssm总是以管理员权 ...

  7. android: SharedPreferences实现记住密码功能

    既然是实现记住密码的功能,那么我们就不需要从头去写了,因为在上一章中的最佳实 践部分已经编写过一个登录界面了,有可以重用的代码为什么不用呢?那就首先打开 BroadcastBestPractice 项 ...

  8. 服务器跟VPS有什么区别

    你好. 服务器是独立的真实存在的硬件设备.其实也就是一台高端电脑.他是放在机房运行的.主要为网站以及一些软件应用提供运行平台.而VPS是虚拟服务器.他是利用软件在服务器上虚拟出来的.也就是分配出一部分 ...

  9. redolog文件头简单探究

    先切换: SQL> select group#,status from v$log; GROUP# STATUS---------- ----------------         1 INA ...

  10. 单元测试 mock EF 中DbContext 和DbSet Include

    现在EF越来越流行了,很多时候业务成都是直接访问DbContext 和DbSet来操作数据的. 那么我们测试的时候如何来mock这2个对象了?现在时间很晚了, 就直接贴code吧 首先看看的我们DbC ...