jQuery AJAX always Error

Question

Trying to display a string from a website through an jQuery AJAX request. However no matter what, I'm always getting an error.

I have a HTML form:

<form name="algoDico" action="" onsubmit="return buttonClicked()">
    Mot: <input type="text" name="mot" id="mot">
         <input type="submit" value="Submit">
</form>

and my Javascript:

var buttonClicked = function () {
var w = $('#mot').val();
$.ajax({
    type: "GET",
    url: "http://www.igrec.ca/project-files/wikparser/wikparser.php",
    dataType: "text",
    data: {
      word: w,
      query: "def",
      count: 1,
      lang: "fr",
    },

    success: function(data) {
        console.log(data);

    },

    error: function(){
        console.log(w);
        console.log("error");
    }
});

}

I wish to retrieve the text from this website (e.g url: http://www.igrec.ca/project-files/wikparser/wikparser.php?word=manger&query=def&count=1&lang=fr)

Yet I keep getting : "error"

Thanks

Answer 1

Here are some useful resources to make cross domain requests:

jQuery AJAX cross domain

http://www.webdevdoor.com/jquery/cross-domain-browser-json-ajax/