跨域Ajax數據

我有一個要求是通過Ajax獲取跨域json數據。我需要維護2個不同的服務器（服務器A和服務器B）。跨域Ajax數據

服務器A只包含靜態內容。 ie：JS，Images，Css

服務器B只包含動態內容即。 php驅動腳本

根據上述要求，我在本地pc上設置併成功配置了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.php其是處理Ajax請求

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' => '[email protected]', 
    'web' => 'http://jonemaxtest.com', 

); 

print json_encode($x,true); 
?>

當我打電話時這個前端index.html，我可以看到這樣的錯誤

SyntaxError: missing ; before statement 
{"fname":"Jone"...}

我試過所以可能時間，但我沒有得到正確的結果。每次我收到這種錯誤信息。我也試圖改變標題（'Content-Type：application/javascript'）;到頭（'Content-Type：application/json'）;但沒有工作。

我在那個代碼集中犯了我的錯誤...？

請幫幫我。

來源

2013-10-09 Umanda

嘗試從該文件類似於服務器返回一個字符串：

$data = json_encode($x); 
echo "/**/my_callback($data);";

其中數據的JSON編碼數組。

並且不要忘記刪除內容類型的標題。

在Ajax請求你的JavaScript，成功：

function (data) {eval(data);}

來源

2013-10-14 20:36:54

嘗試使用JSONP。它專爲跨域使用而設計。

http://www.htmlgoodies.com/html5/tutorials/learn-how-to-use-the-jsonp-data-format-with-jquery.html#fbid=3qCzdTpgxJX

來源

2013-10-14 21:55:36 MrWiLofDoom

有在你的代碼中的一些錯誤

您的AJAX調用設置的dataType="json"代替"jsonp"因爲你逝去的json

修正代碼如下

$(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' => '[email protected]', 
     'web' => 'http://jonemaxtest.com', 

    ); 

     print json_encode($x,true); 
     ?>

希望這會有所幫助，謝謝

來源

2013-10-15 05:09:32 SarathSprakash

你好薩拉特你的修改是完全正確的。它爲我工作。非常感謝你。 – Umanda

不用客氣。如果有幫助，請將答案標記爲正確。 – SarathSprakash

回答

相關問題