使用PHP和Javascript變量更新div內容

Question

我是Ajax的新手，需要一些幫助。

這個想法很簡單，我在div'列表'中有一個目錄列表，當我點擊其中一個目錄時，div'content'必須用php函數列出這個目錄的內容。

這是我的HTML代碼：

<div id="list">
    <ul>
        <li id="directory_1" class="test">directory_1</li>
        <li id="directory_2" class="test">directory_2</li>
        <li id="directory_3" class="test">directory_3</li>
        <li id="directory_4" class="test">directory_4</li>
    </ul>
</div>
<div id="content">
    <!-- Here you can see the folder content-->
</div>

這是我的jQuery + Ajax：

$(".test").click(function(){
    var name = $(this).attr("id");

     $.ajax({
            url: 'list.php',
            type: "POST",
            data: ({folder: name}),
        }); 
});

它工作，我到list.php。 在PHP上我有一個列出目錄內容的函數。

那么如何用php函數刷新'content div'呢？

因此，如果我單擊directory_1，它將顯示/ var / www / pg / directory_1文件夾，然后如果我單擊directory_2，它將清除'content'div，然后列出directory_2文件夾。

這是一個沒有PHP代碼的jsfidde：

http://jsfiddle.net/e5v1dgpc/

對不起我的英語，如果有人有問題，我會盡力澄清。

Answer 1

你可以這樣做：

jQuery('#content').html('');

這將只是將html中的所有內容設置為空白。

或者我認為你可以使用.empty（） - http://api.jquery.com/empty/

如果你在函數開始時調用它，那么它應該在重新填充之前清除div。

$(".test").click(function(){
    var name = $(this).attr("id");
    $( "#content" ).empty();
    $.ajax({
        url: 'list.php',
        type: "POST",
        data: ({folder: name}),
    }); 
});

為了設置你的ajax的目標，你可以用成功條件做這樣的事情。 您需要更改它以顯示您想要的任何內容。

$.ajax({
    url: 'list.php',
    type: 'POST',
    success: function(html) {
        var divSuccess = $('#content', $(html)).addClass('updated');
        $('#content').html(divSuccess);
    }
});

這個鏈接也可能對你有用--jquery ajax加載某個div

Answer 2

最初可以清空它，而不是清空'content'div
關於Ajax帖子的OnSuccess，如下：

$(".test").click(function(){  

    var name = $(this).attr("id");    

    $.ajax({  
    url: 'list.php',  
    type: "POST",  
    data: ({folder: name}),  
    success: function(){
              $( "#content" ).empty();
             }
    });   
});  

希望這就是你要找的......