0

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

Community
  • 1
  • 1
agconti
  • 17,780
  • 15
  • 80
  • 114
  • it all depends - does the api support JSONP? – Neil S Aug 19 '13 at 22:22
  • 1
    Just stop using a form that reloads the page when submitted and stick with the ajax call ? – adeneo Aug 19 '13 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 Aug 19 '13 at 22:29
  • @NeilS I found that it does support JSONP from the documentation. – agconti Aug 19 '13 at 22:44
  • add `event.preventDefault()` to the click event on the button, or `onclick='functionName();return false;'` – abc123 Aug 19 '13 at 22:48
  • Thanks, @abc123 but I'm already using `return false;` on the click event. This `get_data()` function is in a separate script thats called by the click event. – agconti Aug 19 '13 at 22:54

1 Answers1

2

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/

Neil S
  • 2,304
  • 21
  • 28
  • Thanks for the answer Neil. I've been trying to play with the call backs but couldnt quite get it to work. How would I return the data to manipulate it? I've tried: `function (data) {return data;});` but it errors and says I should use a post request. – agconti Aug 19 '13 at 23:59
  • the data is represented by an json object, and that's why in my fiddle I used JSON.stringify to convert the data object to a string. Where are you getting the errors? in jsfiddle? or on your own environment? – Neil S Aug 20 '13 at 00:01
  • In the fiddle and in my local environment. http://jsfiddle.net/8DXxN/1/ Error: `{"error": "Please use POST request"}` Same issue when I return `JSON.stringify(data);` – agconti Aug 20 '13 at 00:05
  • 1
    in that example, you're returning a data object in the success callback function. You should be manipulating the DOM to insert the data in that function, not returning an unmolested object. – Neil S Aug 20 '13 at 00:10
  • 1
    here's a good tutorial about inserting data from a ajax request: http://www.phpeveryday.com/articles/jQuery-AJAX-and-JSON-P969.html – Neil S Aug 20 '13 at 00:12
  • Thanks for your help and the tutorial link. I was so fixated on getting the data out of the function that I never realized I didnt have too. – agconti Aug 20 '13 at 00:22