Question

我有两个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>

当我执行http://page2.html时，.ajax会返回给我： ERROR = 200语法错误 - 意外的标记＆lt;

当我更改dataType时：＆＃34; json＆＃34; to＆＃34; text＆＃34; ,. ajax返回第1页的所有代码HTML。

我需要返回在page1.html中创建的JSON。

任何人都可以帮助我？

由于

ps：对不起我的英语。

Answer 1

这里你已经指定了数据类型为＆＃34; Json＆＃34;，所以响应必须是完整的JSON对象，其他明智的同样的问题也会发生。

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

示例JSON

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

只需复制上面的代码并粘贴到Page1.html中即可立即尝试。 [注意：Page1.html页面仅包含上述代码]

Answer 2

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

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

Answer 3

首先你在第一个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"));

您忘记在每次)电话

的末尾添加push

第二件事是当你使用ajax时，你问服务器，而在这种情况下服务器返回

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

ajax函数将此作为结果并且不执行任何javascript代码并且不等到准备好的事件

您要返回的第一个html页面的结果是

[{"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"}]

如果你只是将这个json字符串放在你的第一个html页面中，没有任何html标签，一切都会正常工作

我建议你把一个像php或nodejs这样的服务器端代码返回json而不是纯javascript所需的结果，因为它是客户端语言

Answer 4

正如@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页面

<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>

参考：-

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

4 个答案: