Problem

I'm trying to query a rest API in javascript and use jQuery to parse and insert the results into my webpage. When the query is made I believe it submits the search form and re-renders the page thus removing all of the elements I just queried and inserted.

Is there away to get a JSON object from a rest api and not re-render the webpage?

Here's what I'm using to make my requests:

function get_data(){
    var url = "www.rest_api/search_term&apikey=My_Key"
    var xmlHttp = null;
    xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", url, false );
    xmlHttp.send( null );
    return xmlHttp.responseText;
}

The search term es from a simple input form, and is submitted when the submit button is clicked. My goal is to keep this webpage to a single page and avoid a results page.

What I've tried

I can't return my json object

Get JSON data from external URL and display it in a div as plain text

.getJSON/

Request URL example:

;per_page=5&page=1&sort=popularity&key=84LTHNZQ1364W14D&format=json

Problem

I'm trying to query a rest API in javascript and use jQuery to parse and insert the results into my webpage. When the query is made I believe it submits the search form and re-renders the page thus removing all of the elements I just queried and inserted.

Is there away to get a JSON object from a rest api and not re-render the webpage?

Here's what I'm using to make my requests:

function get_data(){
    var url = "www.rest_api/search_term&apikey=My_Key"
    var xmlHttp = null;
    xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", url, false );
    xmlHttp.send( null );
    return xmlHttp.responseText;
}

The search term es from a simple input form, and is submitted when the submit button is clicked. My goal is to keep this webpage to a single page and avoid a results page.

What I've tried

I can't return my json object

Get JSON data from external URL and display it in a div as plain text

http://api.jquery./jQuery.getJSON/

Request URL example:

http://woof.magnify/api/content/find?vq=karma&per_page=5&page=1&sort=popularity&key=84LTHNZQ1364W14D&format=json

• javascript
• jquery
• html
• rest

• it all depends - does the api support JSONP? – Neil S Commented Aug 19, 2013 at 22:22
• 1 Just stop using a form that reloads the page when submitted and stick with the ajax call ? – adeneo Commented Aug 19, 2013 at 22:25
• @adeneo so far I've been able to do that by always returning false at the end of my functions but I cant seem to get around submitting the page when I use a function to get the json. – agconti Commented Aug 19, 2013 at 22:29
• @NeilS I found that it does support JSONP from the documentation. – agconti Commented Aug 19, 2013 at 22:44
• add event.preventDefault() to the click event on the button, or onclick='functionName();return false;' – abc123 Commented Aug 19, 2013 at 22:48

1 Answer 1

Remember when calling jsonp apis, you have to add an additional parameter to the url : callback=?

here's a simple fiddle as an example: http://jsfiddle/8DXxN/