Cannot do a post with jquery with json in body - javascript

With Chrome REST service I do this: a post to a certain url, I send a json string in the body, I set the content type as application/json and when I execute the post I get the proper answer.
I am trying to do the same post with jquery.
I first try with:
var beacon = {"beaconid.minor":2,"beaconid.UUID":"beaconnr","beaconid.major":1};
$.ajax({
type: "post",
data: JSON.stringify(beacon),
contentType: "application/json",
dataType: "jsonp",
crossDomain: true,
url: "myurl"}).done(function() {
alert("success");
}).fail(function()
{
alert("error");
});
by I seem to get no answer, I don't get the success alert nor the error alert.
I have then tried with:
var jqxhr = $.post( "myurl", {"beaconid.minor":2,"beaconid.UUID":"beaconnr","beaconid.major":1}).done(function(data, textStatus, jqXHR)
{
}).fail(function(jqXHR, textStatus, errorThrown)
{
alert(textStatus);
});
At least now I get an alert with the textStatus as an error. It is something...but not enough. I could I do a successful post?

The issue is you're setting dataType: "jsonp" for a POST request. JSONP doesn't support POST requests, only GET requests.
I suggest changing to dataType: "json" to see if the service supports CORS. If it doesn't then you'll have to do something like proxy the request through the local server, to get around CORS.

You should not be sending "post" as "type", rather as "method"
And like pointed above, the data type should be json and not jsonp.
$.ajax({
method: "post",
data: JSON.stringify(beacon),
contentType: "application/json",
dataType: "json",
url: "myurl"}).done(function(response) {
alert("success");
//if in chrome
//console.log(response);
}).fail(function(error)
{
//if using Chrome
//console.log(error);
alert(error);
});

Related

How to parse response as json object for cross domain ajax call?

I'm making a cross domain ajax call. When I heat the link directly from my browser, I get the json strin as follows:
But when I'm making an ajax call to this same URL, I'm not getting the json in my response. My ajax request is as follows:
$.ajax({
url: "http://172.16.201.14:801/api/apiclearing?trackNo=" + $scope.BillClearingModel.BillTrackingNo + "&&tokenNo=~Ice321",
dataType: 'jsonp',
success: function(response) {
console.log(response);
alert("Success");
},
error: function(response) {
console.log(response);
alert("Failed");
}
});
What Im getting in console is as follows:
Full Object is as follows:
What I'm missing here? Thanks.
Would you mind trying this:
var datastring = { "trackNo" : "160822000037" };//try this
//var datastring = "trackNo=160822000037"; //or this
$.ajax({
type: 'POST',//you may try the GET type
url: "https://172.16.201.14:801/api/apiclearing",
dataType: 'json',// try jsonp as well
data: datastring,
contentType: 'application/json',
crossDomain: true, //newly added
success: function(data, status, jqXHR) {
console.log(data);
console.log(status);
console.log(JSON.stringify(data));//to string
alert("Success");
},
error:function(jqXHR, textStatus, errorThrown) {
alert("Status:"+ textStatus + " Error:" + errorThrown);
}
You may consider as well to add Access-Control-Allow-Origin to your server like Access-Control-Allow-Origin: http://yourdomain-you-are-connecting-from.com in php

AJAX is not sending request

I have the following code:
$("form").submit(function()
{
//Checking data here:
$("input").each(function(i, obj)
{
});
alert(JSON.stringify($(this).serializeArray()));
var url='http://127.0.0.1:1337/receive';
$.ajax({
url: url,
type: 'POST',
contentType:'application/json',
data: JSON.stringify($(this).serializeArray()),
dataType:'json'
});
});
And after I submit the form, I get a JavaScript alert with the json string, so that is made correct (on my server I only log it so it does not matter what it is in it). If I try to send a request to the same link from postman it works, it logs it.
I think I'm doing something wrong in the ajax call, but I am not able to figure out.
Try below piece of code. Add success and error handler for more details
$("form").submit(function()
{
//Checking data here:
$("input").each(function(i, obj)
{
});
alert(JSON.stringify($(this).serializeArray()));
var url='http://127.0.0.1:1337/receive';
$.ajax({
url: url,
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify($(this).serializeArray()),
dataType:'json',
success : function(response) {
alert("success");
},
error: function (xhr, status, error) {
alert(error);
}
});
});
data:{ list : JSON.stringify($(this).serializeArray())}
From the Jquery docs:
Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.
crossDomain attribute simply force the request to be cross-domain. dataType is jsonp and there is a parameter added to the url.
$.ajax({
url:'http://127.0.0.1:1337/receive',
data:{ apikey: 'secret-key-or-any-other-parameter-in-json-format' },
dataType:'jsonp',
crossDomain: 'true',
success:function (data) {alert(data.first_name);}
});

"400 Bad Request" response for AJAX request

I have the following jQuery AJAX request:
// collect form data and create user obj
var user = new User();
user.firstname = $("#usrFirstName").val();
user.lastname = $("#usrSurname").val();
user.role = $("#usrRole").val();
// actual ajax request
$.ajax({
type: 'POST',
url : 'http://awesome-url',
crossDomain: true,
data: user,
contentType:"application/json; charset=utf-8",
dataType: 'json'
}).done(function(data, status) {
alert(JSON.stringify(data));
}).fail(function(data, status) {
alert(status);
alert(JSON.stringify(data));
});
The response from the Server is:
"status":400,"statusText":"Bad Request"
"The request sent by the client was syntactically incorrect."
The server is running Spring-MVC. But as far as I can tell it is working correctly. Because if I'm sending a request manually with Postman and the following configuration it works.
Header:
Content-Type application/json; charset=utf-8
Content:
{"firstname":"alex","lastname":"lala","role":"admin"}
I have to mention that it is a cross-domain request (for the time developing, it will be hosted on the same domain as the server later). I did disable the security settings in the browser and AJAX requests to the server are working fine (as long as I don't have to send data).
you need to serialize your json, try:
$.ajax({
type: 'POST',
url : 'http://awesome-url',
crossDomain: true,
data: JSON.stringify(user),
contentType:'application/json; charset=utf-8',
dataType: 'json'
})
JSON.stringify() method is used to turn a javascript object into json string. You need to have this. In addition it is better to include success and error portions in the AJAX.
$.ajax({
type: 'POST',
url : 'http://awesome-url',
crossDomain: true,
data: JSON.stringify(user), // turn a javascript object into json string
contentType:'application/json; charset=utf-8',
dataType: 'json',
success: function (html) {
alert(html);
}, error: function (error) {
alert(error);
}
})

Receive serialized in php data by using ajax

I have a php script, which return serialized in php data. And I try to receive this data by using $.ajax() method from jQuery 1.7. Here is the example.
$.ajax({
url: 'http://input.name/get.php?do=lookup' + '&domain=twittorama&tlds=.ru,.com,.net,.comf.ru',
type: 'GET',
dataType: 'text',
cache: 'false',
complete: function(res) {
alert('COMPLETE() done');
console.log(res);
}
});
In console I see only
Object { readyState=0, status=0, statusText="error"}
So, what I do wrong? Could you help me please?
UPD
Interesting notice: if I use JSONP dataType request can receive data, but can't process it.
Here is an example.
$.ajax({
url: 'http://input.name/get.php?do=lookup',
data: 'domain=twittorama&tlds=.ru,.com,.net,.comf.ru',
dataType: 'jsonp',
cache: false,
success: function(data) {
alert("Data: "+data);
},
error: function(jqXHR, textStatus, errorThrown) {
alert("Error: "+textStatus);
console.log(jqXHR);
}
});
Instead of complete: use success: then res will be the returned data from your ajax request.
Remember to use error: as well incase there is an error with you call, as it seems that there might be in your console output.
Code:
$.ajax({
url: 'http://input.name/get.php?do=lookup',
data: 'domain=twittorama&tlds=.ru,.com,.net,.comf.ru',
cache: false,
success: function(data) {
alert("Data: "+data);
},
error: function(jqXHR, textStatus, errorThrown) {
alert("Error: "+textStatus);
console.log(jqXHR);
}
});
Your code is probably fine, but you're trying to violate the same origin policy. Basically, if your site is http://aaa.com/, you cannot make AJAX called to http://bbb.com/.
There are a few ways around it:
Getting around same origin policy in javascript without server side scripts
But most of them require that both sides play nice.
The response is the second parameter of complete function:
$.ajax({
url: 'http://input.name/get.php?do=lookup' + '&domain=twittorama&tlds=.ru,.com,.net,.comf.ru',
type: 'GET',
dataType: 'text',
cache: 'false',
complete: function(res,response) {
alert('COMPLETE() done');
console.log(response);
}
});
More info: http://api.jquery.com/jQuery.ajax/
You should also consider using JSON, not php serialized data

why not get POST parameters in ajax POST of jQuery

The code is listed below:
$.ajax({
type: "POST",
url: "http://localhost:3000/rcm/global_config/update",
data: {k: 'sdfa', v: 'dsfas'},
success: function(data, textStatus, XMLHttpRequest){
alert("数据更新成功");
},
error: function(xhr,textStatus, errorThrown){
alert("数据更新失败,请刷新回滚");
}
});
In the server i can not get post parameters, and then i tamper the request sent by ajax, it doesn't send the data params at all. i don't know where i am wrong.
thank you in advance.
This issue has been asked and aswered before in SO jquery-ajax-post-sending-options-as-request-method-in-firefox
This is because the same origin policy on FF. It only allows you to do XMLHTTPRequests to your own domain.
Maybe your script is loaded from domain "localhost" and your ajax request to "localhost:3000"
Please try this
$.ajax({
type: "POST",
url: "http://localhost:3000/rcm/global_config/update",
data: "{'k': 'sdfa', 'v': 'dsfas'}", // Change are here in this line
success: function(data, textStatus, XMLHttpRequest){
alert("数据更新成功");
},
error: function(xhr,textStatus, errorThrown){
alert("数据更新失败,请刷新回滚");
}
});
$.ajax({
type: "POST",
url: "http://localhost:3000/rcm/global_config/update",
data: $.param({k: 'sdfa', v: 'dsfas'}),
success: function(data, textStatus, XMLHttpRequest){
alert("数据更新成功");
},
error: function(xhr,textStatus, errorThrown){
alert("数据更新失败,请刷新回滚");
}
});
Wrapping the data object in $.param should do it. It will convert that object to the string "k=sdfa&v=dsfas"
hi
please try somthing like this:
$.ajax({
type:"POST",
url:"student/info/ajax.php",
data:({type:'test', r:which}),
success:function(data){
if((data.result)=='true')
$('#result_popup').html(data.output);
},
dataType:"json"});
return false;

Categories