How to pass HTML with json and ajax

Question

I'm trying to display the output from the database using JSON Encode function and Ajax. But, I'm getting difficult on how to pass the html element "" and the php "eg." variable that show data from the server.I want the output to be displayed using json and ajax request.Thanks.

Here's my codes

 //js
  function mpo() 
 {
     $.ajax({
         url: "main.php",
         cache: false,
         success: function(html){
             $("#show_div").html(html);
         }
     });
 }


//php

$bu = "<div class='main' style='margin-left:" .($level*60). "px'>";     
$bu = "<div class='main_one'>";
$bu = "<div class='main_User'>" .($same[2]) . "</div>";
$bu = "<div class='main_Msg'>" .($same[3]) . "</div>";
$bu = "<div class='main_Date'>" . ($same[4]) . "</div>";
$json  =array('bu'=>$bu);
echo json_encode($json);

Anurag pareek · Accepted Answer · 2016-09-01 11:26:42Z

3

You can use dataType : 'html' with this you don't requied to json encode

//js
  function mpo() 
 {
     $.ajax({
         url: "main.php",
         cache: false,
         dataType : 'html'
         success: function(html){
             $("#show_div").html(html);
         }
     });
 }

//php

$bu = "<div class='main' style='margin-left:" .($level*60). "px'>";     
$bu = "<div class='main_one'>";
$bu = "<div class='main_User'>" .($same[2]) . "</div>";
$bu = "<div class='main_Msg'>" .($same[3]) . "</div>";
$bu = "<div class='main_Date'>" . ($same[4]) . "</div>";

echo $json;die;

answered Sep 1, 2016 at 11:26

Anurag pareek

1,4311 gold badge11 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anurag pareek Over a year ago

I am also agree with jeroen. If you want to do it only json encode way then jeroen way is perfect

jeroen · Accepted Answer · 2016-09-01 11:21:00Z

0

You are missing 2 things:

You (probably...) need to parse the json.
You need to get the right element from the parsed object.

To have jQuery parse the json automatically, you can set the dataType:

 $.ajax({
     url: "main.php",
     dataType: 'json',
     ^^^^^^^^^^^^^^^^ set the data type of the returned data
     cache: false,
     success: function(html){
         $("#show_div").html(html.bu);
                             ^^^^^^^ get the correct element
     }
 });

answered Sep 1, 2016 at 11:21

jeroen

91.8k22 gold badges118 silver badges132 bronze badges

1 Comment

sauwbu Over a year ago

How can I do In this way? eg "success:function(data){ var content = ''; var data = $.parseJSON(data); $.each(data, function(i, post) { content += '<div>' + post.post_title + '</div>'; }); $(content).appendTo("#results"); }, "

Collectives™ on Stack Overflow

How to pass HTML with json and ajax

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related