返回在JavaScript HTML页面中创建的JSON_Javascript_Jquery_Html_Ajax_Json

返回在JavaScript HTML页面中创建的JSON

javascript jquery html ajax json

返回在JavaScript HTML页面中创建的JSON,javascript,jquery,html,ajax,json,Javascript,Jquery,Html,Ajax,Json,我有两个HTML页面： 1第一个HTML页面page1.HTML： <html lang="en"> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).re

我有两个HTML页面：

1第一个HTML页面page1.HTML：

<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        event.preventDefault();

        function json1(id,name){
            this.id = id;
            this.name = name;
        }

        id_list = Array();
        id_list.push(new json1("1","TEST_1");
        id_list.push(new json1("2","TEST_2");
        id_list.push(new json1("3","TEST_3");
        id_list.push(new json1("4","TEST_4");
        id_list.push(new json1("5","TEST_5");

        id_list = JSON.stringify(id_list);
        document.write(id_list);
    });
 </script>
 </head>
 </html>

2第二个HTML页面page2.HTML：

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="application/json; charset=utf-8" > 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        event.preventDefault();

        $.ajax({
            url : 'http://www.mydomain.com/page1.html',
            type : 'POST',
            async: false,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(data){
                alert("Return OK");
            },
            error: function(xhr, ajaxOptions, thrownError){
                alert('ERROR = ' + xhr.status + ' - ' + thrownError);
            }       
        });
     });
 </script>
 </head>
 </html>

当我执行时，.ajax返回我：

ERROR=200 SyntaxError-意外标记此处您已将数据类型指定为Json，因此响应必须是完整的Json对象，否则同样的问题也会发生

在代码中，响应不符合JSON格式

示例JSON

{"employees":[
{"firstName":"John", "lastName":"Doe"}, 
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]}

只需复制上述代码并粘贴到Page1.html中，然后立即尝试。

[注意：Page1.html页面仅包含上述代码]

您是否能够使用服务器端语言，如PHP？您可以使用PHP在第1页上构建JSON输出。page1上的唯一输出应该是JSON，这是从page2上的AJAX请求中检索信息的正确方法

当您通过AJAX调用另一个页面时，它将不会执行JS，这需要在服务器端完成。

首先，您在第一个html页面上有一个错误

    id_list = Array();
    id_list.push(new json1("1","TEST_1"));
    id_list.push(new json1("2","TEST_2"));
    id_list.push(new json1("3","TEST_3"));
    id_list.push(new json1("4","TEST_4"));
    id_list.push(new json1("5","TEST_5"));

您忘记在每个推送呼叫的末尾添加

第二件事是，当您使用ajax时，您询问服务器，而在本例中，服务器返回

<html lang="en">
<head>
<script ...

如果您只是将这个json字符串放在您的第一个html页面中，而不带任何html标记，那么一切都会正常工作

我建议您使用服务器端代码，如php或nodejs，以json而不是纯javascript返回所需的结果，因为它是客户端语言，正如@Rory McCrossan所说，如果您发出POST请求，您将只获得第一页的源代码。但是，如果您希望第一个页面生成自定义JSON并发送回父页面，那么您可能可以创建一个隐藏的iFrame。iFrame将重定向到第一个页面，第一个页面将使用跨文档消息传递为父页面发回消息

您可以尝试下面的HTML代码。我还没有测试它，所以它可能会出现一些错误

第一个HTML页面

<!DOCTYPE HTML> 
<html> 

<head> 
    <title> "First Page" </title>     
    <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> 
</head> 

<body> 
    
<script> 

    // You can add your logic to geerate JSON
    var customJSON = "[{"id":"1","name":"TEST_1"},{"id":"2","name":"TEST_2"},{"id":"3","name":"TEST_3"},{"id":"4","name":"TEST_4"},{"id":"5","name":"TEST_5"}]" 

    // Send a message for the outer page
    window.top.postMessage(customJSON, '*')

</script> 
</body> 

</html>

<HTML >
    
<head> 
    <title> "Second page"</title>     
    <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> 
</head> 

<body style="text-align:center;">

<h1>Second page</h1>
<p id="Message"></p>
      
<iframe src="http://example.com/page1.html" height="500" width="300" title="Iframe Example"  id="iframe" style="display:none;" ></iframe>

<script> 

    // Receive message from the iFrame

    window.onmessage = function(e){    
    document.getElementById("Message").innerHTML = e.data
    console.log("e.data", e.data)
};
    
</script> 

</body> 
</HTML>

第二个HTML页面

<!DOCTYPE HTML> 
<html> 

<head> 
    <title> "First Page" </title>     
    <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> 
</head> 

<body> 
    
<script> 

    // You can add your logic to geerate JSON
    var customJSON = "[{"id":"1","name":"TEST_1"},{"id":"2","name":"TEST_2"},{"id":"3","name":"TEST_3"},{"id":"4","name":"TEST_4"},{"id":"5","name":"TEST_5"}]" 

    // Send a message for the outer page
    window.top.postMessage(customJSON, '*')

</script> 
</body> 

</html>

<HTML >
    
<head> 
    <title> "Second page"</title>     
    <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> 
</head> 

<body style="text-align:center;">

<h1>Second page</h1>
<p id="Message"></p>
      
<iframe src="http://example.com/page1.html" height="500" width="300" title="Iframe Example"  id="iframe" style="display:none;" ></iframe>

<script> 

    // Receive message from the iFrame

    window.onmessage = function(e){    
    document.getElementById("Message").innerHTML = e.data
    console.log("e.data", e.data)
};
    
</script> 

</body> 
</HTML>

参考：-

Ajax并没有在外部页面上真正执行javascript，它只是返回该页面的内容，这就是为什么您要获取整个页面，这就是它的工作方式，而您做得不对。您似乎误解了如何创建JSON响应。您正在向HTML页面发出请求，因此正在检索所有HTML源代码，包括未解释的JS。如果要返回JSON，则需要将JSON字符串作为唯一返回的文本。由于您已经看到的原因，使用客户端JavaScript是不可能的。您应该将JSON提要修改为服务器端资源。