使用 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函数刷新'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);
    }
});

这篇 link 可能对您也有用 - jquery ajax load certain div

Answer 2

您可以清空它
，而不是一开始就清空 'content' div Ajaxpost的OnSuccess，如下：

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

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

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

希望这就是您要找的..

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

Update div content using PHP and Javascript variables

javascript

php

ajax

refresh