admin管理员组

文章数量:1377698

I've two HTML pages:

1) First HTML Page (page1.html): 

<html lang="en">
<head>
<script src=".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) Second HTML Page (page2.html):

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

        $.ajax({
            url : '.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>

When I execute , .ajax returns me: ERROR = 200 SyntaxError - Unexpected token <

When I change the dataType: "json" to "text", the .ajax returns me all code HTML of page1.

I need to return the JSON created in page1.html.

Anybody can help me ?

Thanks

ps: sorry about my English.

I've two HTML pages:

1) First HTML Page (page1.html): 

<html lang="en">
<head>
<script src="http://ajax.googleapis./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) Second HTML Page (page2.html):

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="application/json; charset=utf-8" > 
<script src="http://ajax.googleapis./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./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>

When I execute http://page2.html, .ajax returns me: ERROR = 200 SyntaxError - Unexpected token <

When I change the dataType: "json" to "text", the .ajax returns me all code HTML of page1.

I need to return the JSON created in page1.html.

Anybody can help me ?

Thanks

ps: sorry about my English.

  • javascript
  • jquery
  • html
  • ajax
  • json
Share Improve this question asked Jul 23, 2014 at 10:00 Ronaldo AraujoRonaldo Araujo 131 gold badge1 silver badge4 bronze badges 2
  • Ajax doesn't really execute the javascript on the external page, it just returns the content of that page, which is why you're getting the whole page, that's the way it works, and you're doing it wrong. – adeneo Commented Jul 23, 2014 at 10:02
  • 5 You seem to be misunderstanding how to create a JSON response. You are making a request to the HTML page, so you are retrieving all the HTML source code, including the uninterpreted JS. If you want to return JSON, you need to have the JSON string as the only text returned. This is not possible using client side JavaScript for the reason you've seen. You should amend your JSON feed to be a server-side resource. – Rory McCrossan Commented Jul 23, 2014 at 10:03
Add a ment  | 

4 Answers 4

Reset to default 1

First you have a mistake on the first html page

    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"));

you forgot to add ) in the end of each push call

second thing is that when you are using ajax, you're asking the server, while in this case the server returns

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

ajax function take this as result and doesn't execute any javascript code and doesn't wait until ready event

The result of the first html page that you want to be returned is 

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

if you just put this json string in yout first html page witout any html tag, everything will work fine

I suggest you to put a server side code like php or nodejs to return the result you need in json not pure javascript because it's a client side langage

As @Rory McCrossan said, if you make the POST request you will only get the source code of the first page. But if you want the first page to generate a custom JSON and send back to the parent page then probably you can create a hidden iFrame. The iFrame will redirect to the first page and the first page will send a message back for the parent page using cross-document messaging.

You can try below the HTML codes. I haven't tested it so it may give some errors.

First HTML Page

<!DOCTYPE HTML> 
<html> 

<head> 
    <title> "First Page" </title>     
    <script src= "https://ajax.googleapis./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>

Second HTML Page

<HTML >
    
<head> 
    <title> "Second page"</title>     
    <script src= "https://ajax.googleapis./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./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>

Reference:-

  • How to municate between iframe and the parent site?
  • https://developer.mozilla/en-US/docs/Web/API/Window/postMessage

Here you have specified datatype as "Json",So the response must be the plete JSON object,other wise the same issue will be occur.

In your code,the response does not meets JSON format.

Example JSON

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

Simply copy the above code and paste in Page1.html and try now. [Note:Page1.html page contains only the above code]

Do you have the ability to use server side language, such as PHP? You can use PHP to build your JSON output on page1. The only output on page1 should be the JSON, which is the correct way to retrieve the information from your AJAX request on page2.

When you make a call to another page via AJAX, it will not execute JS, this needs to be done server-side.

本文标签：

版权声明：本文标题：jquery - Return JSON created in JavaScript HTML Page - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744428796a2605837.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。