使用 PHP 和 Javascript 变量更新 div 内容

Question

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

这个想法很简单，我在 div 'list' 中有一个目录列表，当我单击其中一个目录时，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 函数刷新“内容 div”？

因此，如果我点击 directory_1，它将显示 /var/www/pg/directory_1 文件夹，然后如果我点击 directory_2，它将清除“内容”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 load certain div