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. 跟我一起学WCF(8)——WCF中Session、实例管理详解

    一.引言 由前面几篇博文我们知道,WCF是微软基于SOA建立的一套在分布式环境中各个相对独立的应用进行交流(Communication)的框架,它实现了最新的基于WS-*规范.按照SOA的原则,相对独 ...

  2. Asp.Net Web API 2第九课——自承载Web API

    前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnblogs.com/aehyok/p/3446289.html Asp.Net Web A ...

  3. ContentControl 与 ViewModel （二）

    上文说到 可以使用DataTemplateSelector. 其实等于是用 DataTemplateSelector + 动态创建DataTemplate来实现. using System; usin ...

  4. Android开发学习总结(五)——Android应用目录结构分析

    一.手动创建android项目 手动创建一个Android项目,命名为HelloWorld,命令如下: android create project -n HelloWorld -t -p E:/An ...

  5. 从源代码分析Universal-Image-Loader中的线程池

    一般来讲一个网络访问就需要App创建一个线程来执行,但是这也导致了当网络访问比较多的情况下,线程的数目可能积聚增多,虽然Android系统理论上说可以创建无数个线程,但是某一时间段,线程数的急剧增加可 ...

  6. [jQuery学习系列六]6-jQuery实际操作小案例

    前言最后在这里po上jQuery的几个小案例. Jquery例子1_占位符使用需求: 点击第一个按钮后 自动去check 后面是否有按钮没有选中, 如有则提示错误消息. <html> &l ...

  7. atitit.j2ee 1.5 1.6 的不同跟 Servlet 3.0新特性总结

    atitit.j2ee 1.5 1.6 的不同跟 Servlet 3.0新特性总结 1. jar比较,j2ee 1.6 添加了许多的jar 1 2. ,Servlet 3.0 2 2.1. 可插性   ...

  8. 分析一个C语言程序生成的汇编代码-《Linux内核分析》Week1作业

    署名信息 郭春阳 原创作品转载请注明出处 :<Linux内核分析>MOOC课程 http://mooc.study.163.com/course/USTC-1000029000 C源码 这 ...

  9. 题目一：一张纸的厚度大约是0.08mm，对折多少次之后能达到珠穆朗玛峰的高度（8848.13米）？

    题目一:一张纸的厚度大约是0.08mm,对折多少次之后能达到珠穆朗玛峰的高度(8848.13米)? //一张纸的厚度大约是0.08mm,对折多少次之后能达到珠穆朗玛峰的高度(8848.13米 doub ...

  10. hdu 2844 多重背包coins

    http://acm.hdu.edu.cn/showproblem.php?pid=2844 题意: 有n个硬币,知道其价值A1.....An.数量C1...Cn.问在1到m价值之间,最多能组成多少种 ...