I have read a lot of posts, old, new and the wikipedia documentation.
I have this request that works itself and in the sanbox:
https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=einstein&format=json
https://www.mediawiki.org/wiki/Special:ApiSandbox#action=query&format=json&list=search&srsearch=einstein
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
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");
}
});
});
})
Related
I am showing default charts on my dashboard and there is a form also and I want to update/filter the charts after the form submission.
Js code:
$(document).ready(function() {
$.ajax({
url: (contextPath + "/setting/dashboard"),
success: function(result){
drawLineChart()
}
}
});
$("#chartupdate").submit(function(e){
e.preventDefault();
var form = $(this);
var url = form.attr('action') ;
$.ajax({
url: url,
type: "POST",
data: form.serialize(),
success: function(data){
console.log("form" + data);
}
}) ;
}); });
A bracket inline 9 was preventing the execution of .submit function. Remove the bracket
$(document).ready(function() {
$.ajax({
url: (contextPath + "/setting/dashboard"),
success: function(result){
drawLineChart()
}
});
$("#chartupdate").submit(function(e){
e.preventDefault();
var form = $(this);
var url = form.attr('action') ;
$.ajax({
url: url,
type: "POST",
data: form.serialize(),
success: function(data){
console.log("form" + data);
}
}) ;
});
});
So I am trying to shorten an URL with the new V4 Bitly API, but I am getting an JSON error.
My code:
$(function() {
$(".createBitly").on("click", function(e) {
e.preventDefault();
var url = $(this).attr("href");
var accessToken = "xxx";
var params = {
"long_url" : encodeURIComponent(url)
};
$.ajax({
url: "https://api-ssl.bitly.com/v4/bitlinks",
cache: false,
dataType: "json",
method: "POST",
contentType: "application/json",
beforeSend: function (xhr) {
xhr.setRequestHeader("Authorization", "Bearer " + accessToken);
},
data: params
}).done(function(data) {
console.log(data);
}).fail(function(data) {
console.error(data);
});
});
});
Results: a 422 http error;
"{"message":"UNPROCESSABLE_ENTITY","resource":"bitlinks","description":"The JSON value provided is invalid."}"
But running it with CURL does work though: How to shorten URL using PHP Bitly v4?
What am I doing wrong? Is it not possible with jQuery only?
TIA.
I had made this edit from your code above and its working well.
1) JSON.stringify before sending request (convert your request to JSON format).
2) No need for encodeURIComponent().
$(function() {
$(".createBitly").on("click", function(e) {
e.preventDefault();
var url = $(this).attr("href");
var accessToken = "token";
var params = {
"long_url" : url
};
$.ajax({
url: "https://api-ssl.bitly.com/v4/shorten",
cache: false,
dataType: "json",
method: "POST",
contentType: "application/json",
beforeSend: function (xhr) {
xhr.setRequestHeader("Authorization", "Bearer " + accessToken);
},
data: JSON.stringify(params)
}).done(function(data) {
console.log(data);
}).fail(function(data) {
console.log(data);
});
});
});
Am trying to make wikipedia viewer for my freecodecamp project. But the ajax request fails every time. It does not return anything.
var url, value;
$(document).ready(function() {
$("button").on("click", function() {
value = $("input").val();
var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" +
value + "&format=json&callback=?";
$.ajax({
type: "GET",
url: url,
async: false,
dataType: "json",
//jsonp: "callback",
success: function(data) {
console.log(data);
}
});
});
});
set dataType: 'jsonp'
remove &callback=? from the url (that's the default that jQuery will use anyway
example
var value = "google";
var url = 'https://en.wikipedia.org/w/api.php?action=opensearch&search='+ value + '&format=json';
$.ajax({
type: 'GET',
url: url,
dataType: 'jsonp',
success: function (data)
{
console.log(data);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Use this code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" /><br /><br />
<button>Click here</button>
<script>
var url, value;
$(document).ready(function() {
$("button").on("click", function() {
value = $("input").val();
var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" +
value + "&format=json";
$.ajax({
type: "GET",
url: url,
async: false,
dataType: "jsonp",
success: function(data) {
console.log(data);
}
});
});
});
</script>
Trying to make a simple ajax call but I'm not able to console.log the response.
Navigating to the url in browser gives back data, but still.
I'm not seeing the error alert either, so it should not be failing?
Code:
var $searchBox = $('#search');
var $searchButton = $('#button');
$searchButton.on('click', function(){
var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search="
+ $searchBox.val() + "&format=json&callback=?";
console.log(url);
$.ajax({
type: 'GET',
url: url,
async: false,
dataType: 'json',
success: function(data){
console.log(data);
},
error: function(errorMessage){
alert('Error');
}
});
});
To prevent click default redirection, you can use e.preventDefault() event.
var $searchBox = $('#search');
var $searchButton = $('#button');
$searchButton.on('click', function(e){
e.preventDefault();
var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search="
+ $searchBox.val() + "&format=json&callback=?";
console.log(url);
$.ajax({
type: 'GET',
url: url,
async: false,
dataType: 'json',
success: function(data){
console.log(data);
},
error: function(errorMessage){
alert('Error');
}
});
});
i using JQuery Ajax to call REST api in jsp but it return null no matter how i call but it can work in html. is there any way to solve this problem. Cant seem to find a solution in the net.
$(document).ready(function () {
alert('ready');
var accessKey = 'xkg8VRu6Ol+gMH+SUamkRIEB7fKzhwMvfMo/2U8UJcFhdvR4yN1GutmUIA3A6r3LDhot215OVVkZvNRzjl28TNUZgYFSswOi';
var thisUrl = 'http://www.onemap.sg/API/services.svc/getToken?accessKEY=' + accessKey;
$.ajax({
type: "GET",
url: thisUrl,
dataType: 'application/json',
success: function (data) {
alert('data is:' + data.GetToken[0].NewToken);
}
});
alert(thisUrl);
});
dataType should be jsonp
$(document).ready(function () {
var thisUrl = 'http://www.onemap.sg/API/services.svc/getToken?accessKEY=' + accessKey;
$.ajax({
type: "GET",
url: thisUrl,
dataType: 'jsonp',
success: function (data) {
console.log(data)
alert('data is:' + data.GetToken[0].NewToken);
}
});
});
Refer to this article:
http://www.isgoodstuff.com/2012/07/22/cross-domain-xml-using-jquery/
You only need "jquery.xdomainajax.js" that is there in the sample source-code to make it work.
$.ajax({
url: 'https://asdf/asdf',
dataType: "xml",
type: 'GET',
success: function(res) {
var myXML = res.responseText;
alert(myXML);
}
});