What is the actual url sent to the server when I use the jquery ajax? And how do I access that value? For example, consider the following code:
<script>
$.ajax({
type: "POST",
dataType: "json",
url: "response.php",
data: {name:'Smith',age:10},
success: function(data) {
...
}
beforeSend: function(){
console.log(url);
// what do I put here to see what is being sent
// I am expecting to see "response.php?name=Smith&age=10"
}
...
So essentially what variable holds "response.php?name=Smith&age=10".
Thanks.
No variable holds
response.php?name=Smith&age=10
because you aren't sending the data as a query string. This would happen if you issued a GET request, but doesn't with a POST request.
You're sending the data in the request body of an HTTP post. The data is the data that you assigned to the data parameter. You don't need to round-trip it through jQuery's ajax methods. You've got it already. It's:
{name:'Smith',age:10}
does jQuery's interpretation of your data really matter?
The settings object is fully populated when beforeSend is called:
beforeSend: function(jqXHR, settings) {
console.log(settings.url);
console.log(settings.data);
}
$.ajax({ type: "POST", ... }) will log
response.php
name=Smith&age=10
and type: "GET"
response.php?name=Smith&age=10
undefined
Related
I am using JQuery's .ajax method to call to a URL which returns a JSON encoded string. I can see the object returned from the GET in the debugger, but for some reason I'm not falling into the success function. Any ideas?
$.ajax({
type: "GET",
url: 'http://search.issuu.com/api/2_0/document?q=jamie',
dataType: "jsonp",
success: function(data){
alert('Success!');
}
});
If you look at the documentation, it shows that the proper way to make a jsonp request requires a jsonCallback parameter.
Code:
$.ajax({
type: "GET",
url: 'http://search.issuu.com/api/2_0/document?q=jamie&jsonCallback=?',
dataType: "jsonp",
success: function(data){
alert('Success!');
}
});
Fiddle: http://jsfiddle.net/xrk4z6ur/2/
jQuery will by default use callback=? for a jsonp request. In this case, the API accepts jsonCallback. Adding jsonCallback=? to the url will let jQuery handle it properly.
If you are using jsonp you should specify a callback GET parameter like &callback?
On server side return the callback with your desired data as argument (json encoded)
What I'm working on is providing 1 line instant definitions of terms and perhaps one line answers to few logical questions. Suppose a user inputs "JavaScript" and JavaScript visits the url https://api.duckduckgo.com/?q=JavaScript&format=json&pretty=1, gets the item "Definition" (Look at the API link to understand, Definition is in the first line itself) and displays its value of Definition and alert the user with the required data.
Anyways my code currently is:
<html>
<head>
<title>Hi</title></head>
<body>
<input id="ddgAPI"><button>Search</button>
<div id="output"></div>
</body>
</html>
Please note that I've not put in the required JavaScript/jQuery code as I'm confused with this. Thank you :)
Because this is a cross-domain request you can only do this with a proxy or with JSONP. Fortunately DuckDuckGo supports JSONP, so you just need to ensure that you add a callback parameter to the URL request like:
https://api.duckduckgo.com/?q=JavaScript&format=json&pretty=1&callback=jsonp
... or use the appropriate jsonp parameter with jQuery's ajax method, something like:
$('#ddgAPI').on('keyup', function(e) {
if (e.which === '13') {
$.ajax({
type: 'GET',
url: 'https://api.duckduckgo.com/',
data: { q: $(this).val(), format: 'json', pretty: 1 },
jsonpCallback: 'jsonp',
dataType: 'jsonp'
}).then(function (data) {
console.log(data);
});
}
});
Use jQuery.ajax() to talk to the remote service. url should be https://api.duckduckgo.com. type should be GET. data should be:
var data = { q:'JavaScript', format:'json', pretty:1 };
jQuery will then compile everything into an AJAX request, send it to the server. Pass a function as success so you can do something with the result:
$.ajax({
url: "https://api.duckduckgo.com",
type: "GET",
data: { q:'JavaScript', format:'json', pretty:1 },
success: function(data) { $('#output').html(data); }
});
Is it possible to request an external JS file while also posting serialized data in that same request? I'd like to pass along some values to validate the request, but not have those values be a part of the request url.
On the backend I'll process the posted values and return the proper JS after validation, then continue with the injected JS functions as a callback of getScript.
I see no data option in the API:
http://api.jquery.com/jQuery.getScript/
$.getScript is a shorthand Ajax function, which is equivalent to:
$.ajax({
url: url,
dataType: "script",
success: success
});
So I assume You can use the following code to do that
$.ajax({
url: url,
data: {data: serializedData},
dataType: "script",
success: success
});
In a jquery ajax call I get sent back some JSON from the server and want to use some of it in the success callback. I pass in the data, but how do I get at a specific value (say "id")?
I tried this but I get undefined:
success : function(data) {
alert(data["id"]);
},
Your ajax request should look something like this:
$.ajax({
url: "...",
dataType: "json",
success: function(data){
alert(data.id);
});
Hi all;
var v_name = null;
$.ajax({
type: "GET",
url: "Testpage.aspx",
data: "name=test",
dataType: "html",
success: function(mydata) {
$.data(document.body, 'v_name', mydata);
}
});
v_name = $.data(document.body, 'OutputGrid');
alert(v_name);
first alert undefined before alert work why ?
In addition to the other answers, also keep in mind that by default .ajax GET requests are cached, so depending on your browser, it may look like all of your requests are returning the same response. Workarounds include (but are not limited to): using POST instead of GET, adding a random querystring to your url for each request, or adding 'cache: false' to either your ajax call or to the global ajaxSetup.
To make it work, you have to place the alert() in the success function:
$.ajax({
type: "GET",
url: "Testpage.aspx",
data: "name=test",
dataType: "html",
success: function(mydata) {
alert(mydata);
}
});
AJAX calls are asynchronous, and therefore JavaScript would evaluate alert(v_name); before the server responds to the AJAX call, and therefore before the success function is called.
Your AJAX applications must be designed in such a way to be driven by the AJAX response. Therefore anything you plan to do with mydata should be invoked from the success function. As a rule of the thumb, imagine that the server will take very long (such as 1 minute) to respond to the AJAX request. Your program logic should work around this concept of asynchrony.
$.ajax({
type: "GET",
url: "Testpage.aspx",
data: "name=test",
dataType: "html",
success: function(mydata) {
alert(mydata);
}
});