跨域Ajax數據
[英]Cross Domain Ajax data
問題描述
我有一個要求，即通過Ajax獲取跨域json數據。 我需要維護2個不同的服務器（服務器A和服務器B）。
服務器A僅包含靜態內容。 即：JS，圖片，CSS
服務器B僅包含動態內容，即。 php驅動腳本
根據上述要求，我已經在本地計算機上設置並成功配置了Nginx + Apache環境。
我在本地主機上運行兩個域。
服務器A： http://localhost:9000/ >在Nginx上作為靜態內容的前端運行
服務器B： http://localhost:8888/ >在Apache上作為動態內容（例如php）的后端運行
服務器A包含
index.html jquery和自定義Ajax處理Java腳本。
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="./js/jquery-1.7.2.min.js" type="application/javascript"></script>
<script src="./js/script.js" type="application/javascript"></script>
<title>Ajax</title>
</head>
<body>
<div id="result"></div>
</body>
</html>
script.js
$(document).ready(function(e) {
var url = 'http://localhost:8888/drp/application/ajax.php';
var success = function(data){
var set = "";
set += "Name: "+ data['fname']+ " " + data['lname']+"<br>";
set += "Age: "+ data['age']+"<br>";
set += "Address: "+ data['address']+"<br>";
set += "Email: "+ data['email']+"<br>";
set += "Web: "+ data['web']+"<br>";
$('#result').html(set);
};
var error = function(jqXHR, textStatus, errorThrown){
//alert(errorThrown);
alert('errorThrown');
};
$.ajax({
type: 'GET',
url: url,
data:{todo:"jsonp"},
dataType: "jsonp",
crossDomain: true,
cache:false,
success: success,
error: error
});
});
服務器2包含處理Ajax請求的ajax.php
ajax.php
<?php
#header('Content-Type: application/json');
header('Content-Type: application/javascript');
$x = array(
'fname' => 'Jone',
'lname' => 'Max',
'age' => '26',
'address' => 'London,Uk',
'email' => 'jone.max@test.com',
'web' => 'http://jonemaxtest.com',
);
print json_encode($x,true);
?>
當我調用此前端index.html時，我會看到這樣的錯誤
SyntaxError: missing ; before statement
{"fname":"Jone"...}
我可能會花些時間嘗試，但是我沒有得到正確的結果。 每當我收到這種錯誤消息時。 我也嘗試更改標頭（“內容類型：應用程序/ javascript”）； 進入header（'Content-Type：application / json'）; 但沒有用。
在該代碼集中我在哪里犯了錯誤...？
請幫我。！
3 個解決方案
解決方案1
2 2013-10-14 20:36:54
嘗試從服務器返回一個字符串，如下所示：
$data = json_encode($x);
echo "/**/my_callback($data);";
數據是您的JSON編碼數組。
並且不要忘記刪除內容類型的標題。
在您的JavaScript中的Ajax請求中，成功完成：
function (data) {eval(data);}
解決方案2
2 2013-10-14 21:55:36
解決方案3
2 2013-10-15 05:09:32
您的代碼中有一些錯誤
由於要傳遞
json在ajax調用中設置dataType="json"而不是"jsonp"更正的代碼如下
$(document).ready(function(e) { var url = 'http://localhost:8888/drp/application/ajax.php'; var success = function(data){ var set = ""; set += "Name: "+ data['fname']+ " " + data['lname']+"<br>"; set += "Age: "+ data['age']+"<br>"; set += "Address: "+ data['address']+"<br>"; set += "Email: "+ data['email']+"<br>"; set += "Web: "+ data['web']+"<br>"; $('#result').html(set); }; var error = function(jqXHR, textStatus, errorThrown){ //alert(errorThrown); alert('errorThrown'); }; $.ajax({ type: 'GET', url: url, data:{todo:"jsonp"}, dataType: "json", crossDomain: true, cache:false, success: success, error: error }); });在
ajax.php您已將標頭設置為application/javascript，但是您的數據為json因此將其更改為application/json，還應該添加另一個標頭以允許跨域header('Access-Control-Allow-Origin: *');。這是更正的代碼
<?php header('Access-Control-Allow-Origin: *'); header('Content-Type: application/json'); $x = array( 'fname' => 'Jone', 'lname' => 'Max', 'age' => '26', 'address' => 'London,Uk', 'email' => 'jone.max@test.com', 'web' => 'http://jonemaxtest.com', ); print json_encode($x,true); ?>
希望對您有所幫助，謝謝
使用ajax獲取跨域數據
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.