ajax json converting ampersand to html special character

Question

I have a PHP script that returns a json_encoded response that is like so:

//PHP
$response = array('type' => 'success', 'content' => '&&!%$#!some words');
echo json_encode($response);
return;

Now the JS takes the response and tries to put the content in a textarea:

 $('#some_form').ajaxForm({

    success: function(resp){

        if(resp.type === 'success')
        {

            $('#text_area').val(resp.content);

        }

    },
    dataType: 'json'
});

The content of the script will be displayed as this in the text area:

&amp;&amp;!%$#!some words

Why are the ampersands being messed up but not the other types of punctuation? Is there a way around this? I would like the ampersands to show up as a regular ampersand in the text area.

there is no built in function to do that, here is another thread on the same question: http://stackoverflow.com/questions/3700326/decode-amp-back-to-in-javascript — Johnny Craig, Aug 26 '11 at 18:19
Check the contents of the `$response` variable before json_encode, I would bet that the `&`s are already there at this point (or it's the ajaxForm plugin that's messing up with your data) — Arnaud Le Blanc, Aug 26 '11 at 18:24
@arnaud576875 there is no reason for PHP to use HTML encoding in a variable - it has no idea what you're about to do with that data. It is possible that the json_encode function is causing this, but I suspect this is happening somewhere in the browser. — tomfumb, Aug 26 '11 at 18:35
PHP itself and json_encode most probably not, but maybe some PHP code, please check ;) — Arnaud Le Blanc, Aug 26 '11 at 18:38

score 1 · Answer 1 · answered Aug 29 '11 at 07:02

You could fix your problem by using html() instead of val().

The problem happens when you try to insert an & using the val() function which in any case turns the & to & because & is reserved in html and if you want to use it to display an ampersand you have to use &.

But since & is html and the function val() only inserts text it turns "&" into html again, so you get the text "&" showing up in the browser.

score 0 · Answer 2 · answered Aug 26 '11 at 18:55

This code below would produce the following json {"type":"success","content":"&&!%$#!some words"}

 $response = array('type' => 'success', 'content' => '&&!%$#!some words');
        echo json_encode($response);
        return;

I cannot see where the special characters are getting converted into html entities. I suspect there's more going on here than meets the eye.

score 0 · Accepted Answer · answered Aug 29 '11 at 06:56

Just looked through the code for the jquery form plugin. There is a special case in there where file uploads are treated differently (and the part that I'm using as well). Details of how that works can be found here: http://jquery.malsup.com/form/#file-upload

But what happens is that it uses a call to innerHTML to retreive the content. That actually converts things into html character strings.

I augmented it in a way so that it does a URL encode first then URL decode to maintain the integrity of the text.

ajax json converting ampersand to html special character

3 Answers3