JSONP跨域請求數據報錯「Unexpected token :」的解決辦法

時間 2019-11-09

標籤 jsonp 請求數據報錯 unexpected token 解決辦法欄目 JSON 简体版

原文原文鏈接

Jquery使用ajax方法實現jsonp跨域請求數據的時候報錯「Uncaught SyntaxError: Unexpected token :」，主要問題在於返回的數據格式不正確javascript

本地虛擬兩個域名，分別爲：www.test.com、www.abc.comphp

http://www.test.com/index.html頁面點擊按鈕，請求返回 www.abc.com域名目錄下的文件的數據，其代碼爲：html

<!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文件代碼爲：java

<?php 
$arr = array ('username'=>'jack','age'=>21,'gender'=>'male'); echo json_encode($arr); ?>

在Chrome瀏覽器調試會發現報錯了，如圖：jquery

json.php返回的數據確實是json類型的數據 {「username」:」jack」,」age」:21,」gender」:」male」} ，問題處在哪？ajax

翻看了一下Jquery文檔發現jsonp:」callback」, jsonpCallback:」success_jsonpCallback」,傳遞這兩個參數是有緣由的，jsonp的返回數據格式應該是: 「客戶端傳遞的回調方法名稱(json數據)」，將php文件改成：json

<?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 :」的解決辦法

JSONP跨域請求數據報錯「Unexpected token :」的解決辦法