Question

65

Return JSON created in JavaScript HTML Page

rated 0 times [ 71] [ 6] / answers: 1 / hits: 15616 / 10 Years ago, wed, july 23, 2014, 12:00:00

I've two HTML pages:

1) First HTML Page (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) 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.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>

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

aubriea

Add To Favorites

Follow

Total Points: 641

Total Questions: 118

Total Answers: 101

Location: French Southern and Antarctic Lands

Member since Fri, Jan 6, 2023

1 Year ago

answered 10 Years ago alorac · Accepted Answer

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