1

我有一个通过 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 脚本。

索引.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>

脚本.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"...}

我试过了，但我没有得到正确的结果。每次我收到这种错误信息。我也尝试更改 header('Content-Type: application/javascript'); 进入 header('Content-Type: application/json'); 但没有用。

我在那个代码集中做错了什么......？

请帮我。！

4

3 回答 3

2

尝试从服务器返回一个字符串，如下所示：

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

其中 data 是您的 JSON 编码数组。

并且不要忘记删除内容类型的标题。

在您的 JavaScript 中的 Ajax 请求中，成功时：

function (data) {eval(data);}
于 2013-10-14T20:36:54.127 回答
2

尝试使用 jsonp。它专为跨域使用而设计。

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

于 2013-10-14T21:55:36.033 回答
2

你的代码有一些错误

  • 您必须在您的 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' => 'jone.max@test.com',
      'web' => 'http://jonemaxtest.com',

     );

       print json_encode($x,true);
      ?>

希望这会有所帮助，谢谢

于 2013-10-15T05:09:32.173 回答