We Keep Coding

jquery ajax request with json throwing parsererror

I have searched lot of on this issue and tried almost everything but it doesn't seem to be work so posting it here.
I am trying to make jquery ajax call to ashx handler by passing json data. But my request doesnt reach till handler GetBalance.ashx
code :
var mydata = {};
$.ajax({
url: 'Handlers/GetBalance.ashx?type=authenticateRequest',
type: 'post',
dataType: 'json',
cache: false,
data: mydata,
success: function (data) {
},
error: function (xhr, status) {
console.log(status);
console.log(xhr.responseText);
}
});
in console it prints
parsererror
(empty string)
What i am doing wrong ? It should reach till .ashx before it gives any response parse error
Edit:
Changed as suggested by answer

Replace your line
data: mydata,
with
data: JSON.stringify(mydata),
contentType: "application/json",

Populate a html div with json data received from a server

I need to have a html div populated with the json data received from the server which is a json-rpc server and it retruns an application/jsson-rpc content type and i can see the result in the chrome and firefox dev tools... I need to view it as part of the page inside a given div
i have this script to populate the mybox div but it gives nothing
var returnedinfo;
var request = $.ajax ({
url: "/url",
type: "POST",
data: JSON.stringify(data),
success: function(json) {
alert("success sent ajax");
$("#mybox").html(json);
returnedinfo = json;
});
I also tied having the populating function outside the ajax block when the request is done
request.done(function(msg) {
$("#mybox").text(msg);
});
This just return an empty array like this
[object Object]
and nothing else help will be appreciated.

you need to append the key of the json item.
$("#mybox").html(json.key);

Add dataType to your ajax request.
var request = $.ajax ({
url: "/url",
type: "POST",
data: JSON.stringify(data),
dataType: "json",
success: function(json) {
alert("success sent ajax");
$("#mybox").html(json);
returnedinfo = json;
});

try this my working example
look contentType and html function to replace html of mybox element
$.ajax({
type: 'POST',
data: JSON.stringify(data),
contentType: "application/json; charset=utf-8",
url: 'url',
success: function (dataRes) {
$('#mybox').html(dataRes);
},
error: function(a,b,c) {
}
});
Note that in this case dataRes in success function is an html string like <strong>test</strong>. If your server side function returns a json object you should add dataType: 'json' to ajax request and then you can use properties of dataRes object like here $('#mybox').html(dataRes.property1);

How to use the response of Ajax Post

I make an ajax POST request to post JSON data to server, and I get a simple text response. I can see that everything works fine because it is shown in the browser's debugger. However, I cannot use it.
callajax1(Callback);
function callajax1(callbackfn) {
$.ajax({
type: "POST",
url: myUrl,
data: JSON.stringify({ Data: data }),
contentType: "text/plain; charset=utf-8",
dataType: "json",
success: function (data2) {
callbackfn(data2);
},
failure: function (errMsg) {
}
});
return false;
}
function Callback(data) {
alert(data);
}
No alert is showing.

You say that you are getting a "simple text response" back, but your JavaScript (dataType: "json") says to ignore the content type of the response and parse it as JSON.
Perhaps (since you are sending JSON and claiming it is plain text) you are confusing dataType (override the content type the server returns) and contentType (describe the data you are sending).
If the response is "simple text" and not JSON then you can't parse it as JSON. Either return JSON or use dataType: 'text'.

if result of ajax is text, datatype should be text
if result of ajax is html, datatype should be html
if result of ajax is json, datatype should be json
if result of ajax is xml, datatype should be xml
dataType tell jQuery to parse result in given dataType, default is 'text', though jQuery is intelligent enough to detect which conversion is required.

you can see the answer here:
http://jsfiddle.net/justtal/x9re9/
function callajax1(callbackfn) {
$.ajax({
type: "GET",
url: 'https://gdata.youtube.com/feeds/api/videos',
/*data: JSON.stringify({ Data: data }),*/
/*contentType: "text/plain; charset=utf-8",*/
/*dataType: "json",*/
success: function (data2) {
callbackfn(data2);
},
failure: function (errMsg) {
callbackfn(errMsg);
}
});
return false;
}
var Callback = function (data) {
alert(data);
}
callajax1(Callback);

How to store JSON response into JavaScript

I'm trying to store the JSON response in to variable so that I can process it later, i tried with following but getting null,
function go(){
var jsonObj = getJson(url);
alert(JSON.stringify(jsonObj));
}
function getJson(){
return JSON.parse($.ajax({
type: 'POST',
url: 'url',
dataType: 'json',
global: false,
async: false,
success: function(data){
return data;
}
}).responseText);
}
mean time i can see the JSON content getting printed on my server console.
EDIT
Thannks rid..! that fixed the issue. you solution works fine in IE8, but for Chrome and FireFox still getting 'null' in alert pop-up. i don't think its browser specific fix..?

$.ajax({
type: 'POST',
url: 'url',
dataType: 'json',
global: false,
async: false,
success: function(data){
// do some stufs or assign data to a var
window.myVar = data;
}
});
Ajax is asynchronous ,so you need to store the response in a variable in the callback.
in this exemple , window.myVar is a global variable that will contain the response data. You cant access the variable until a response has returned , you'll need to write async code.

Passing js object as json to jquery?

I have the following but it's not working, I read somewhere on the stackoverflow that it works like this but I can't seem to get it to work.. it errors... am I doing something wrong?
If I do pass data like this - it works -- so I know my service is working
//THIS WORKS
data: "{one : 'test',two: 'test2' }"
// BUT SETTING UP OBJECT doesn't work..
var saveData = {};
saveData.one = "test";
saveData.two = "tes2";
$.ajax({
type: "POST",
url: "MyService.aspx/GetDate",
data: saveData,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
alert(msg.d);
},
error: function(msg) {
alert('error');
}
});

I believe that code is going to call .value or .toString() on your object and then pass over the wire. You want to pass JSON.
So, include the json javascript library
http://www.json.org/js.html
And then pass...
var saveData = {};
saveData.one = "test";
saveData.two = "tes2";
$.ajax({
type: "POST",
url: "MyService.aspx/GetDate",
data: JSON.stringify(saveData), // NOTE CHANGE HERE
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
alert(msg.d);
},
error: function(msg) {
alert('error');
}
});

According to this blog post, the reason it doesn't work when you try to pass the object is that jQuery attempts to serialize it. From the post:
Instead of passing that JSON object through to the web service, jQuery will automatically serialize and send it as:
fname=dave&lname=ward
To which, the server will respond with:
Invalid JSON primitive: fname.
This is clearly not what we want to happen. The solution is to make sure that you’re passing jQuery a string for the data parameter[...]
Which is what you're doing in the example that works.

My suggestion would be to use the jquery-json plug-in and then you can just do this in your code:
...
data: $.toJSON(saveData),
...