在ajax调用之后将HTML附加到特定的DOM

Question

In my php page, I've three lists ul#line, ul#comment, ul#vote.

I'm going to make an ajax call, something like

           $.ajax({
        type: "POST",
        url: "ajax.php",
        data: dataString,

        cache: false,
        success: function(html){
            $("ul#line").append(html);
            $("ul#lineli:last").fadeIn("slow");
    }

Ajax.php is something like

if(isset($line)){
    echo $line;
} elseif(isset($comment)){
    echo $comment;
} elseif (isset($vote)){
    echo $vote;
} else {
   //do nothing;
}

What I want is, if the echoed out HTML is $line, it'll be appended to ul#line; if it is $comment, it'll be appended to ul#comment; if it is $vote, it'll be appended to ul#vote.

The current ajax call appends only at ul#line.

What do I need to change to achieve this??

Answer 1

I would pass back the information as JSON. Have something like:

{updateList : nameOfList, output: $line/$output/$vote }

Then on success you could do something like

$('#'+html.updateList).append(html.output);

You have to make sure to let jQuery know that you are sending and to accept json as the type back though.

Answer 2

php

class DataObject
{
    public $Type;
    public $Text;
}
    $json=new DataObject();

if(isset($line)){
    $json->Type="line";
    $json->Text=$line;
    return json_encode($json);
} elseif(isset($comment)){
    $json->Type="comment";
    $json->Text=$comment;
    return json_encode($json);
} elseif (isset($vote)){
    $json->Type="vote";
    $json->Text=$vote;
    return json_encode($json);
} else {
   //do nothing;
}

javascript

    $.ajax({
    type: "POST",
    url: "ajax.php",
    dataType: 'json',  //add data type
    data: dataString,    
    cache: false,
    success: function(data){
        $("ul#"+data.type).append(data.text);
        $("ul#"+data.type+"li:last").fadeIn("slow");
     }

Answer 3

You need some way to differentiate the values of $line and $comment .

I'd suggest sending back JSON from your PHP script:

if(isset($line)){
    echo '{"line" : ' . json_encode($line) . '}';
} elseif(isset($comment)){
    echo '{"comment" : ' . json_encode($comment) . '}';
} elseif (isset($vote)){
    echo '{"vote" : ' . json_encode($vote) . '}';
} else {
   //do nothing;
}

Note: PHP isn't my strongest language so there might be a better way to generate the JSON response

success: function(data){
           if(data.line) {
              $("ul#line").append(html);
              $("ul#lineli:last").fadeIn("slow");
           }
           else if(data.comment) {
              $("ul#comment").append(html);
              $("ul#commentli:last").fadeIn("slow");
           }
        }