WIKIPEDIA VIEWER: GET request works in Browser, but not $.ajax()

Link to my Wikipedia Viewer Codepen

I’m currently stumped on how to get $.ajax() to work. What else do I need to add to the ajax request to make it work? The ajax function is not calling the success() or the error() function and is failing silently.

I’ve been looking through stackoverflow posts and FCC topics on the Wikipedia Viewer/ Wikipedia API. I think I’ve managed to find the correct API request.

For Example, GET ‘https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&titles=&srsearch=hello+world’ succeeds in the browser, but not through AJAX.

Your form is refreshing the page on submit. Add e.preventDefault(); inside handleQuery() to prevent refreshing.

2 Likes

Thank you! That fixed my code. My follow up question - Even if the form is refreshing, why does that prevent the ajax function from running properly?

I am stuck in a similar situation, where i can see the array in browser but unable to fetch it by json. Tried & tested various solution only to see the error alert again & again. Please kindly help me get through it.
Link to my code

I tweaked a few things in your project to make the ajax function work.

  1. Include JQuery in you javascript settings. Just look for ‘quick-add’ to add the library to the codepen
  2. ‘api’ should be ‘url’ inside the ajax call
  3. change ‘json’ to ‘jsonp’

It should look like this:
$.ajax({ type: 'GET', data: { get_param: 'value' }, url: yql_url, async: true, dataType: 'jsonp', success: function (data) { console.log(data); }

Hi Guang-yi. Thanks for your time & solution. But unfortunately it did not work