jQuery.ajax POST request converted to GET - ajax

I have the following jQuery code:
$.ajax({
url: Url,
dataType: 'JSONP',
type: 'POST',
success: function (data, textStatus, jqXHR) {
//callback function here
},
error: function (xhr, ajaxOptions, thrownError) {
//report error
}
});
However, when i view this AJAX request in Fiddler, my request has been converted from a POST to a GET.
This is not allowed with the API I'm connecting to, as it must be a POST request.
Why is this happening?

JSONP requests can only be GETs.
Remove dataType: 'JSONP'.

dataType: 'JSONP',
is always a GET request

You cannot use POST with JSONP see https://groups.google.com/forum/?fromgroups=#!topic/jquery-dev/5-tKI-7zQvs for more detail on this.

Related

Unable to bind data in ajax through webapi

I am getting data by verifying through "jsonp" but it is going to error.
$.ajax({
type: 'GET',
url: _BaseUrl,
contentType: 'application/json;charset=utf-8',
processData: false,
crossDomain: true,
dataType: 'json',
success: function (data) {
sourceGrid = data;
return true;
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.error);
return false;
}
});
Error is:
XMLHttpRequest cannot load url. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin url is therefore not allowed access.
Please mention URL you are using for AJAX.. One reason could be you are using full url with http.. Try relative URL.
I have got the answer.Need to call a class which contains in detail to allow access.

Does JSONP response need callback in response

I'm not clear if my response to a JSONP call needs to have the callback reference in the response. For example, the following AJAX call:
$.ajax({
type: 'GET',
url: ajaxurl ,
async: false,
dataType: "jsonp",
jsonpCallback: "do_teacher_survey_callback",
data: {action: 'test'},
success: function (result) {
},
error: function (request,error) {
}
});
Does the response need to look like the following:
do_teacher_survey_callback({"field":"data"})
Or can I just return pure JSON like this:
{"field":"data"}
I'm confused because I have used JSONP before to resolve cross-domain calls to servers that I had no control over the response and it worked fine.

JQuery.Ajax POST request to Azure returning bad request

I have mobile services configured on my Azure database and I am trying to send a POST request to update the data. The service keeps returning a bad request and I fear its because of the format of my JQuery.Ajax request. I have tried a number combinations but I can't see what I'm doing wrong. The schema of the request can be found here (http://msdn.microsoft.com/en-us/library/windowsazure/jj677200.aspx), any help would be appreciated.
function RegisterPatient(){
var wsUrl = "https://vervemobile.azure-mobile.net/tables/ref_*****";
var data = {"YearOfBirth":1970,"Sex":"M","ControlGroupMember":false,"OrganisationID":null,"Type":null}
$.ajax({
url:wsUrl,
type: "POST",
data:data,
beforeSend: function (request)
{
request.setRequestHeader("X-ZUMO-APPLICATION", "******");
request.setRequestHeader("Content-Type", "application/json");
},
success: function(data, textStatus, jqXHR)
{
alert(JSON.stringify(data));
},
error: function (jqXHR, textStatus, errorThrown)
{
alert(JSON.stringify(jqXHR));
console.log(JSON.stringify(jqXHR));
console.log(JSON.stringify(textStatus));
console.log(JSON.stringify(errorThrown));
}
});
}
Thanks in Advance,
Bradley
The request requires a json body to be sent, so you have to stringify your data.
...
$.ajax({
url:wsUrl,
type: "POST",
data: JSON.stringify(data),
...

Why isn't the JSONP callback function getting invoked?

I am trying to use jsonp to access the data at:
https://github.com/users/jbranchaud/contributions_calendar_data
However, none of the solutions I have tried are resulting in either the callback or the success function getting invoked. When I use Chrome/Firefox inspection tools, I can look at the script and see that the response was 200 Ok and that the response text contains the data from the above URL. Nevertheless, neither the callback function nor the success function get called at any point. Any ideas about how to get this to work?
Here is my most recent attempt at getting this to run:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function parseResults(results) {
console.log('hello function callback.');
}
$.ajax({
url: 'https://github.com/users/jbranchaud/contributions_calendar_data',
type: 'post',
dataType: 'jsonp',
jsonp: true,
jsonpCallback: 'parseResults',
success: function(data, textStatus, jqXHR) {
console.log('success_function');
console.log(data);
},
error: function() {
console.log('error with jsonp request');
}
});
</script>
When I load the page, I see the 'error with jsonp request' in the console, so there is an error with the ajax request. Ideas of why this request isn't succeeding?
In the ajax request, try to set the attribute 'jsonp' to false (jsonp: false).
Basically, JQuery generate an automatic function callback name, like this : JQuery1223...34.
In your case, you ,already, explicitly set the jsonpCallback function name. so you have to put jsonp attribut to false.
your code should be like this :
$.ajax({
url: 'https://github.com/users/jbranchaud/contributions_calendar_data',
type: 'post',
dataType: 'jsonp',
jsonp: false,
jsonpCallback: 'parseResults',
success: function(data, textStatus, jqXHR) {
console.log('success_function');
console.log(data);
},
error: function() {
console.log('error with jsonp request');
}
});

How to use an ajax call's response to manipulate a dynamic page?

I am trying to submit a form with the user's inserted data and get the html back from the page called (update.asp).
How do I get the html response and how do I write it to a div on the page? The response would be "success".
If my page throws a 500 or other type of error, how can I handle that?
$('input#btnUpdate').click( function() {
$.ajax({
url: 'update.asp',
type: 'post',
dataType: 'json',
data: $('form#myForm').serialize(),
success: function(data) {
// how do i catch the response? is this the right place?
},
error: function(data) {
// how do I catch the error code here?
}
});
The response from the server in both cases would be passed to the callback as the data variable in your example. Try using console.log(data) inside of your callbacks to see the result in your developer console.
$('input#btnUpdate').click( function() {
$.ajax({
url: 'update.asp',
type: 'post',
dataType: 'json',
data: $('#myForm').serialize(),
success: function(response) {
$("#yourDIV").html(response);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(thrownError); //output, 500
}
});
});
More on this: ajax()

Resources