jQuery: fetch JSON request response and display it under current html page

Question

I am implementing something like this:

There is a JSON-based web service on a remote server. Its method can be called by simply putting specially structured URLs like this:

http://root-url/ws/service-name?request={json-string}

The {json-string} portion contains parameters to call the method, and the response will be displayed in the browser.

And what I am trying to do is: Implement a form on a html page, and when the user fills in the information and submits it, the response will be shown like an embedded page below the form. I tried using the <object> tag and it reports error: failed to parse json request. Is there anyway I can do this with jQuery/javascript?

Thanks in advance.

Edit: Basic structure of my page:

<form>
 ...
</form>

<div id="responseContainer">

</div>

I have jQuery Code that generates a valid URL (stored in a javascript variable) string with the data from the form as parameters in it. What I want to do is to load the response page in the current html page (inside "responseContainer") with the URL.

I have tried the following methods: $.ajax():

           jQuery.ajax({
                      url: link //where the url is stored
                    }).done(function( data ) {
                        if ( console && console.log ) {
                     console.log( "Sample of data:", data.slice( 0, 100 ) );
                        }
                        jQuery('#responseContainer').html(data);
                    });

And $.get():

$.get(link, function(data) {
                    $('#responseContainer').html(data);
                });

But neither worked, both reported the same error in the console:

"XMLHttpRequest cannot load: ... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access."

What have you tried? Can you upload your code? -- http://stackoverflow.com/help/how-to-ask — Craicerjack, Mar 25 '15 at 18:11
I think you need to look into ajax. - http://api.jquery.com/jquery.ajax/ — Craicerjack, Mar 25 '15 at 18:18
@Craicerjack, the code is pretty long.. but the javascript code is basically reading form values and putting them in the right place of the json-string. It generates a valid URL and can be put directly in the browser or set as the "href" attribute of an anchor. It is just embedding the response page in the current page I am struggling with. — Rui Chen, Mar 25 '15 at 18:19
The url you have up above is an API, you call it with a request passing in yours variables in a url string. So like in ajax you query the url and add the data to it which will give you the response which you can work with. Ajax will help you do this. — Craicerjack, Mar 25 '15 at 19:29
@Craicerjack thank you! But using ajax and get() seem to both running into problems. — Rui Chen, Mar 25 '15 at 21:07

score 1 · Accepted Answer · edited May 23 '17 at 12:24

1

XMLHttpRequest cannot load: ... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

You can't make AJAX requests to other websites except your own website. This is called Cross-origin resource sharing.

Site A.com can't make AJAX requests to site B.com unless B.com sends the following Access-Control-Allow-Origin header:

Access-Control-Allow-Origin: http://www.A.com

The solutions is to either make the AJAX request from B.com (put the javascript code at B.com) or add the header at B.com. You can also use JSONP.

If you want to fetch information from say reddit.com you can create a PHP script that fetches reddit and then make an AJAX request to that PHP script.

// getWebsite.php
<?php echo file_get_contents("http://reddit.com"); ?>

Then with AJAX:

$.get('getWebsite.php', function(data) {
   $('#responseContainer').html(data);
});

edited May 23 '17 at 12:24

Community

1
1

answered Mar 25 '15 at 21:16

Sawny

1,404
2
14
31

Thank you very much! This is really helpful information. So in this case, is there any simple way to achieve something like this: load the public content in current page from a remote page by providing the URL to it? – Rui Chen Mar 25 '15 at 21:26
@RuiChen You can't do that with just javascript. You need to create for example a PHP script that load the public content with ``. Save that file as `getRemoteSite.php` then make an AJAX call to `getRemoteSite.php` – Sawny Mar 25 '15 at 21:30
Thank you! I will look into JSONP and see if I can make use of it. – Rui Chen Mar 25 '15 at 22:06

score 0 · Answer 2 · answered Mar 25 '15 at 18:29

0

You say your URL is being built correctly, and you're using jQuery, so try something like:

$.get(yourUrl, function(data) {
    $('#responseContainer').html(data);
});

This will request the yourUrl (make sure to change this to your variable) and fill your responseContainer div with the response of the request.

Check out http://api.jquery.com/jQuery.get/ for more info.

answered Mar 25 '15 at 18:29

Alexandre R. Janini

498
9
20

Thank you! But I ran it in the JBoss server and it did not work. It seems that the anonymous callback function was not called, indicating that performing a GET to the URL was not successful... – Rui Chen Mar 25 '15 at 20:26
It seemed that when I use local files, it the callback method will be called and content successfully fetched, but when it is a remote URL, it cannot be fetched. I am not sure why. – Rui Chen Mar 25 '15 at 20:42

jQuery: fetch JSON request response and display it under current html page

2 Answers2