Why is this invalid JSON?

I am sending some data from an server back to a page. It looks like valid JSON to me, yet, it is being caught/handled by the error handler in my jQuery.ajax开发者_如何学C() call.

This is the error message displayed:

Error: Invalid JSON: ({"id":"#settingsResult","payload":"<form id=\"pwd_change_frm\" action=\"post\">\n    <div>\n        <div>\n            <div><\/div>\n            <div><label for=\"changepwd_password\">New Password<\/label><\/div>\n            <div><input type=\"password\" name=\"changepwd[password]\" title=\"Enter new password\" style=\"width:258px;\" id=\"changepwd_password\" \/><\/div>\n        <\/div>\n        <div class=\"spacer\">&nbsp;<\/div>\n        <div>\n            <div><\/div>\n            <div><label for=\"changepwd_password_confirm\">Confirm New Password<\/label><\/div>\n            <div><input type=\"password\" name=\"changepwd[password_confirm]\" title=\"Retype new password)\" style=\"width:258px;\" id=\"changepwd_password_confirm\" \/><\/div>\n        <\/div>\n        <div class=\"spacer\"><\/div>\n        <div><img id=\"pwd_chg_btn\" class=\"submit_btn\" src=\"\/images\/button_submit.gif\" alt=\"Button_submit\" \/><\/div>\n    <\/div>\n    <input type=\"hidden\" name=\"changepwd[_csrf_token]\" value=\"1b7f3529797245c0fc43c3ddf5ade30d\" id=\"changepwd__csrf_token\" \/><\/form>\n<div class=\"spacer\"><\/div>"})

As an aside, FF Firebug correctly parses the returned data and displays ot correctly - which is why I dont understand why jQuery can't seem to handle it.

here is the bit of code that makes the call:

jQuery.ajax({
  type: 'POST',
  url: '/some_url?id='+this.id,
  timeout: 2000,
  success: function(result){ jQuery(result.id).html(result.payload); },
  error: function (xhr, ajaxOptions, thrownError){ alert('Error: '+ thrownError); }
});

Probably useless to answer at this point, but I just thought I'd note that the issue does somehow seem to be with $.parseJSON().

If I remove all occurrences of \n, and replace all occurrences of \" with \', it works.

Alternatively, if I double escape them, it works.

\\n
\\"

...which would make sense since I believe jQuery simply does an eval() (or effectively the same thing), so I guess escaping the " is terminating the string and escaping the \n is introducing a newline character where it would be invalid.

Because of the surrounding '()', remove it and its valid json.

Since everything else appears to be valid, the problem is likely that you are including ( and ) in the data.

The error also appears when you use jquery validate (version 1.7). You can check: http://datatables.net/forums/comments.php?DiscussionID=3993&page=1#Item_16

I also upgraded to jquery 1.5.1 and i had the same issue. After i updated jquery validate (from here: https://github.com/jzaefferer/jquery-validation) the error disappeared.

What is the actual JSON that is being passed? The string in the error message:

{"id":"#settingsResult",
 "payload":"\n \n \n <\/div>\n New Password<\/label><\/div>\n <\/div>\n <\/div>\n  <\/div>\n \n <\/div>\n Confirm New Password<\/label><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/form>\n<\/div>"}

is valid according to JSONLint. Are you including the parens?

Update after Question Changed

Is it possible that <\/div> is somehow confusing things? This isn't valid HTML so I don't know what jQuery(result.id).html(result.payload) is going to do with it.

jquery requires that you supply "dataType: json" unless you supply the proper content type in your serverside code like "header('Content-type: application/json');"

According to json.org

JSON can be either an array or an object

An object is an unordered set of name/value pairs. An object begins with { (left brace) and ends with }

object structure

An array is an ordered collection of values. An array begins with [ (left bracket) and ends with ]

array structure

So JSON should start with either '{' or '[' and it can't start with '('

Also you use following online validator like debugjson.com to always check errors of your JSON input.