Is jQuery.parseJSON able to process all valid json?

Question

This piece of valid json (it has been generated using php's json_encode):

{"html":"form is NOT valid<form id=\"articleform\" enctype=\"application\/x-www-form-urlencoded\" method=\"post\" action=\"\"><dl class=\"zend_form\">\n<dt id=\"title-label\">&nbsp;<\/dt>\n<dd id=\"title-element\">\n<input type=\"text\" name=\"title\" id=\"title\" value=\"Artikel K\"><\/dd>\n<dt id=\"articleFormSubmitted-label\">&nbsp;<\/dt>\n<dd id=\"articleFormSubmitted-element\">\n<input type=\"hidden\" name=\"articleFormSubmitted\" value=\"1\" id=\"articleFormSubmitted\"><\/dd>\n<dt id=\"submit-label\">&nbsp;<\/dt><dd id=\"submit-element\">\n<input type=\"submit\" name=\"submit\" id=\"submit\" value=\"Bewaar artikel\" onclick=\"this.value='Bezig...';\"><\/dd><\/dl><\/form><script type=\"text\/javascript\">\n\t $(\"#articleform\").submit(function(){\n $.post(\"\/admin\/ajax\/contenttree\/node\/9\/ajaxtarget\/ajaxContainer\", $(\"#articleform\").serialize(), function(html){$(\"#ajaxContainer\").html(html);} );\n\t\t return false;\n\t });\n\n <\/script>","newNodeName":""}

is giving

jQuery.parseJSON(data)

and me a hard time.

With this piece of code:

alert('start');
alert(data);
jQuery.parseJSON(data);
alert('stop');

I get a message start and then the data (jsonstring above) is shown. The message "stop" never appears.

When I use this json:

{"html":"test","newNodeName":""}

The message stop eventually appears.

$.ajax({
      url: "/admin/ajax/contenttree/node/" + (node.id).replace("node_", ""),
      success: function(data){

      //this message appears
      alert("succes");

      //this gives undefined
      alert(data.html);

      var result = $.parseJSON(data);

      //this message never appears
      alert("after parse");

        $("#ajaxContainer").html(result.html);
      }
    });

I've verified that my first big chunk of json is valid. Why isn't it processed by jQuery.parseJSON Are there any special characters that don't go well with json?

Answer 1

What you posted is already JSON, no need to parse it. Example:

var data = {"html":"form is NOT valid<form id=\"articleform\" enctype=\"application\/x-www-form-urlencoded\" method=\"post\" action=\"\"><dl class=\"zend_form\">\n<dt id=\"title-label\">&nbsp;<\/dt>\n<dd id=\"title-element\">\n<input type=\"text\" name=\"title\" id=\"title\" value=\"Artikel K\"><\/dd>\n<dt id=\"articleFormSubmitted-label\">&nbsp;<\/dt>\n<dd id=\"articleFormSubmitted-element\">\n<input type=\"hidden\" name=\"articleFormSubmitted\" value=\"1\" id=\"articleFormSubmitted\"><\/dd>\n<dt id=\"submit-label\">&nbsp;<\/dt><dd id=\"submit-element\">\n<input type=\"submit\" name=\"submit\" id=\"submit\" value=\"Bewaar artikel\" onclick=\"this.value='Bezig...';\"><\/dd><\/dl><\/form><script type=\"text\/javascript\">\n\t $(\"#articleform\").submit(function(){\n $.post(\"\/admin\/ajax\/contenttree\/node\/9\/ajaxtarget\/ajaxContainer\", $(\"#articleform\").serialize(), function(html){$(\"#ajaxContainer\").html(html);} );\n\t\t return false;\n\t });\n\n <\/script>","newNodeName":""};

alert(data.html);
alert(data.newNodeName);

Am I missing something other piece?, let me know if I'm not understanding correctly.

Update: Change your ajax method to use the native $.ajax support for this:

$.ajax({
      url: "/admin/ajax/contenttree/node/" + (node.id).replace("node_", ""),
      dataType: 'json',
      success: function(data){
        alert("succes");
        $("#ajaxContainer").html(data.html);
      }
    });

Answer 2

Try with:

alert('start');
data=data.replace('\','\\');
alert(data);
test= jQuery.parseJSON(data);
alert(test.html);
alert('stop');

It works for me.

Answer 3

I've found the answer to the problem! Or at least the origin of the problem.

The problem is caused by the "<" and ">" characters. As soon as i try to pass along those characters, the parseJSON-function fails.

Is there a way to allow those characters?

I've already tried to add header('Content-Type: text/html; charset=utf-8'); to the code that is generating the ajax-response.

Answer 4

I found the answer for my problem. In my question you'll find that I tried to pass the html inside an array with the key html. In the javascript-code I tried to get the html using

jQuery.parseJSON(data);
alert(data.html);

When I renamed the key htmlstring the parseJSON-function worked fine. There's no need anymore now to escape anything after the php-function json_encode does it job.

I believe now that .html is a reserved word in jQuery, so if you want to use parseJSON don't feed it a json with a key named "html".