JavaScript从rest API获取JSON而无需重新呈现页面

Question

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 comes 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.com/jQuery.getJSON/

Request URL example:

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

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.net/8DXxN/