How to pass HTML via JSON from PHP to AJAX - properly

Question

I'm still in AJAX stuff since morning so maybe thats the reason why some things does't work as they schould - let's forget about it. To sum up, my problem is coincident with passing HTML via JSON. An example of the PHP code:

$list = "<strong>This is test</strong>";
$response = array('success'=>true, 'src' => $list);
echo json_encode($response); 

Basicly that's the main part of the code which is responsible for passing the HTML to AJAX. Now, let's have a look on part of AJAX code:

            success: function(output)
            {
                alert(output);
                json = $(output).find(".content").text();
                var data = $.parseJSON(json);
                if(data.success == true)
                {
                   obj_a.parents(".row").append(data.src);
                   obj_a.attr("id", "rollBack");
                   obj_a.text("Roll back");
                }
            },

Some of you will ask what am I doing in this part:

json = $(output).find(".content").text();

The answer is: I retrieve the json string from the ".content" box, so when I alert variable "json: i get:

{"success":true,"src":"1. dsfasdfasdffbcvbcvb<\/span>Edytuj<\/span> <\/a>Usu \u0144<\/span><\/div>2. vbnvbnm454t<\/span>Edytuj<\/span><\/a>Usu\u0144<\/span><\/div>3. ndfhgndgfhndfhgndfhd<\/span>Edytuj<\/span><\/a>Usu\u0144<\/span><\/div><\/div>"}

The problem is that I do not get this HTML... I get only text witout any HTML tags, styles etc...

String which I get, rather than HTML: "1. dsfasdfasdffbcvbcvbEdytujUsuń2. vbnvbnm454tEdytujUsuń3. ndfhgndgfhndfhgndfhdEdytujUsuń"

Please don't try to look for anything smart or gunius in the above string because u won't - it's only a test string.

Acording to the part of PHP code - in my case I get "This is test" rather than " This is test ".

To sum up my question is, how to pass these HTML tags or whole HTML code via json from PHP to AJAX.

Answer 1

I think you're misunderstanding how jQuery.ajax() works. You just need to tell it that dataType: 'json' (meaning that you're expecting JSON output from the server), and it takes care of the rest. You don't need to use jQuery.parseJSON() . The success() method will be given a JavaScript object representing the server response.

        success: function(output)
        {
            // output is a JS object here:
            alert(output.success);  // true

            // ...
        },

To get your HTML from that point, you would just access output.src .

Answer 2

You can specify dataType: 'json' in your ajax request and receive an object(ie json already parsed) in your success call. eg

$.ajax(url, {
    dataType: 'json',
    success: function(output)
        {
            if(output.success == true)
            {
               obj_a.parents(".row").append(output.src);
               obj_a.attr("id", "rollBack");
               obj_a.text("Roll back");
            }
        },

if you can't change dataType you would call $.parseJSON on output

 function(output)
        {
            alert(output);
            var data = $.parseJSON(output);
            if(data.success == true)
            {
               obj_a.parents(".row").append(data.src);
               obj_a.attr("id", "rollBack");
               obj_a.text("Roll back");
            }
        },