HTML in JSON corruption?

An AJAX request with a JSON response ends up corrupted and won't e

Page 1 of 1

2 Replies - 3155 Views - Last Post: 28 May 2010 - 06:59 AM Rate Topic: -----

#1 Guest_Rimer*


Reputation:

HTML in JSON corruption?

Posted 27 May 2010 - 10:06 PM

Hey everyone,

I'm building a content management system and i've been trying to code all the AJAX requests using JSON responses. The client makes a request, for instance, to upload an image to an image gallery, and if the upload of the file is successful, a JSON object containing the markup to draw the new image on the page is returned along with a status code. The JSON string is as follows:

{
   "result":1,
   "filename":"Lighthouse.jpg",
   "imageid":"uploadedimage4",
   "caption":"",
   "title":"",
   "newimg":"<MARKUP GOES HERE>"
}


However, once the client receives and eval's this json object, the "newimg" element of the resulting object somehow contains corrupted markup which then causes the eval to fail in parsing the JSON object, breaking the string.

If you follow the POST/RESPONSE via firebug, it shows the json html code is properly escaped (I'm using json_encode only before I send it back to the client), and it looks fine in the transmission, but if I ALERT the response string before evalling it, I notice that the markup in the json string is completely screwed up. It appears that the double-quotes in the string lost their escape backslash, and inserted a \&quot; inside each set, instead of escaping them. Here's a paste from the alert:

"newimg":"\t\t<div class="\&quot;imgUploaded\&quot;" id="\&quot;container_uploadedimage4\&quot;">\r\n\t\t\t\t<div class="\&quot;imgDelete\&quot;">\r\n\t\t\t<img src="%5C%22images%5C/icon-delete.jpg%5C%22" id="\&quot;delete_uploadedimage4\&quot;" alt="\&quot;Delete" image\="" class="\&quot;newimageremover\&quot;" \="">\r\n\t\t&lt;\/div&gt;\r\n\t\t<div class="\&quot;imgDrag\&quot;"><img src="%5C%22images%5C/icon-drag.jpg%5C%22" id="\&quot;drag_uploadedimage4\&quot;" alt="\&quot;Move" image="" to="" category\="" class="\&quot;newimagedrag\&quot;" \="">&lt;\/div&gt;\r\n\t\t<br \="">\r\n\t\t<div class="\&quot;imgTitle\&quot;"><input class="\&quot;imgTitle-edit\&quot;" id="\&quot;title_uploadedimage4\&quot;" name="\&quot;editTitle\&quot;" value="\&quot;\&quot;" \="" type="\&quot;text\&quot;">&lt;\/div&gt;\r\n\t\t<br \="">\r\n\t\t<div class="\&quot;imgThumb\&quot;"><img src="%5C%22.%5C/uploads%5C/thumbs%5C/tn_Lighthouse.jpg%5C%22" id="\&quot;thumb_uploadedimage4\&quot;" alt="\&quot;Lighthouse.jpg\&quot;" class="\&quot;thumbnail\&quot;" \="">&lt;\/div&gt;\r\n\t\t<br \="">\r\n\t\t<div class="\&quot;imgDesp\&quot;"><textarea class="\&quot;imgDesp-edit\&quot;" id="\&quot;caption_uploadedimage4\&quot;" name="\&quot;editDecp\&quot;" rows="\&quot;3\&quot;" cols="\&quot;15\&quot;" \="">&lt;\/textarea&gt;&lt;\/div&gt;\r\n\t\t&lt;br \/&gt;\r\n\t\t&lt;select name=\"mydropdown\" id=\"category_uploadedimage4\" class=\"newimgcat\"&gt;\r\n\t\t\t&lt;option&gt;Choose Category...&lt;\/option&gt;\r\n\t\t\t&lt;option&gt;---------------&lt;\/option&gt;\r\n\t\t\t&lt;option value=\"create\"&gt;Create a new Category&lt;\/option&gt;\r\n\t\t\t&lt;option value=\"cat1\"&gt;Category One&lt;\/option&gt;\r\n\t\t\t&lt;option value=\"cat2\"&gt;Category Two&lt;\/option&gt;\r\n\t\t\t\r\n\t\t&lt;\/select&gt;\r\n\t\t&lt;\/div&gt; &lt;!-- imgUploaded --&gt;"}</textarea></div></div></div></div></div></div>


I'm using ajaxupload.js (http://valums.com/ajax-upload/) for file uploads, and as far as i can tell, it does no post-processing on the response, just evals it, so not sure why the corruption exists in the first place.

Anyone seen this? Is there a better or different way to pass HTML back to the client in a JSON object that I'm not aware of?

This post has been edited by JackOfAllTrades: 28 May 2010 - 07:56 AM
Reason for edit:: Added code tags.


Is This A Good Question/Topic? 0

Replies To: HTML in JSON corruption?

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4337
  • View blog
  • Posts: 12,137
  • Joined: 18-April 07

Re: HTML in JSON corruption?

Posted 27 May 2010 - 10:33 PM

Well understand that it is not corrupted, it is just encoded. \r\n for instance is a carriage return. \t is a tab. &lt; and &gt; is your less than or greater than characters surrounding tags (aka <>). On the server, how are you putting together the HTML to send back? You are not setting it up with some kind of formatting are you? Are you breaking the html across multiple lines for instance? If you do something like...


$lineofhtml = "<div>
                 <div>Test</div>
               </div>";



It is going to come out looking like...

&lt;div&gt;\r\n\t&lt;div&gt;Test&lt;\/div&gt;\r\n&lt;\/div&gt;



Or at least something similar. All you should be doing on the server side is backslashing the double quotes. :)
Was This Post Helpful? 0
  • +
  • -

#3 rimer  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 10-December 09

Re: HTML in JSON corruption?

Posted 28 May 2010 - 06:59 AM

Yeah see, that is what has me stumped... I'm merely encoding that HTML in json using json_encode(), which is supposed to, according to PHP docs, replace " with \" and / with \/. if you look at that haggard-ass string I supplied earlier, that is clearly not what is showing up....

(Pardon my lack of the usage of code tags and posting while not signed in last nite, btw, haha)

it starts with:
\t\t<div class="\&quot;imgUploaded\&quot;" 



YES \t is a tab and \r\n is a new line in the php string I encoded. But look at the class declaration for that div... in my php string it was

<tab><tab><div class="imgUploaded" //...



...and after json_encoding and delivery to the client, when alterted out it shows up as


\t\t<div class="\&quot;imgUploaded\&quot;" 



That is what is breaking the JSON Eval. So, the problem is, what could possibly make that transformation on the response data between the json_encode and then the client eval? It LOOKS like the double quotes were attempted to be converted to \&quot;, but the quotation marks they were trying to replace remained...

This post has been edited by rimer: 28 May 2010 - 07:00 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1