返回在 JavaScript HTML 頁面中創建的 JSON

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 SyntaxError - Unexpected token <

當我將 dataType: "json" 更改為 "text" 時，.ajax 會返回 page1 的所有代碼 HTML。

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

任何人都可以幫助我嗎？

謝謝

ps：對不起我的英語。

Answer 1

這里你指定了數據類型為“Json”，所以響應必須是完整的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 輸出。 page1 上唯一的輸出應該是 JSON，這是從 page2 上的 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 這樣的服務器端代碼來返回你需要的結果，而不是純 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 個解決方案

解決方案1
0 2014-07-23 14:20:46

解決方案2
0 2014-07-23 14:26:33

解決方案3
0 已采納 2014-07-23 14:32:54

解決方案4
0 2020-07-15 11:41:07

返回在 JavaScript HTML 頁面中創建的 JSON

問題描述

4 個解決方案

解決方案1 0 2014-07-23 14:20:46

解決方案2 0 2014-07-23 14:26:33

解決方案3 0 已采納 2014-07-23 14:32:54

解決方案4 0 2020-07-15 11:41:07

解決方案1
0 2014-07-23 14:20:46

解決方案2
0 2014-07-23 14:26:33

解決方案3
0 已采納 2014-07-23 14:32:54

解決方案4
0 2020-07-15 11:41:07