cedlemo cedlemo - 3 months ago 11
Ajax Question

How to make a search with jquery and the wikipedia API

I have read a lot of posts, old, new and the wikipedia documentation.

I have this request that works itself and in the sanbox:



but when I try to use it in a javascript script, I can not get the data:

I tried both ajax and Json:

here is the code I used:


  • a 'GET' request with ajax :



code markup sucks

function build_wiki_search_url(pattern) {
var base_url = "https://en.wikipedia.org/w/api.php";
var request_url = "?action=query&format=json&list=search&srsearch=";
var url = base_url + request_url + pattern;
return url;
}

$(document).ready(function() {
$("#doit").click(function() {
console.log("Submit button clicked");
var pattern = $("#search").val();
var url = build_wiki_search_url(pattern);
console.log(url);
$.ajax( {
type: "GET",
url: url,
dataType: 'jsonp',
success: function(data) {
console.log(data);
},
error: function(errorMessage) {
console.log("damnn");
}
});
console.log("end");
});
})



  • a 'POST' request with ajax following the wikipedia documentation

    var base_url = "https://en.wikipedia.org/w/api.php";
    $.ajax( {
    contentType: "application/json; charset=utf-8",
    url: base_url,
    data: {
    action: 'query',
    list: 'search',
    format: 'json',
    srsearch: 'einstein',
    origin: '*',
    },
    dataType: 'json',
    type: 'POST',
    success: function(data) {
    console.log("ok");

    // do something with data
    },
    error: function(errorMessage) {
    console.log("damnn");
    }
    } );

  • and a getJSON try:

    //getJSON atempt.
    console.log(url + '&callback=?');
    $.getJSON(url + '&callback=?', function(json) {
    console.log("ok");
    });



Here is the output in my console:

Submit button clicked
https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&srsearch=einstein
script.js
end

Answer

The problem comes in fact from the html:

<form > 
  <input type="text" id="search"> <button id="doit"> Search!!</button>
</form>

Since the button is in a form, this button normal behavior is to generate a submit action. So the idea is to disable this normal behavior with:

$("#doit").click(function(e) {
    e.preventDefault();

The full working code :

function build_wiki_search_url(pattern) {
    var base_url = "https://en.wikipedia.org/w/api.php";
    var format = "&format=json";
    var request_url = "?action=query&format=json&list=search&srsearch=";
    var url = base_url + request_url + pattern;
    return url;
}
$(document).ready(function() {
    $("#doit").click(function(e) {
        e.preventDefault();
        console.log("Submit button clicked");
        var pattern = $("#search").val();
        var url = build_wiki_search_url(pattern);
        $.ajax( {
            type: "GET",
            url: url,
            dataType: 'jsonp',
            success: function(data) {
                console.log(data.query.searchinfo.totalhits);
            },
            error: function(errorMessage) {
                 console.log("damnn");
              }
        });
    });
})
Comments