Question

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

这个想法很简单，我在div＆＃39; list＆＃39;中有一个目录列表。当我点击其中一个目录时，div＆＃39;内容＆＃39;必须用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上，我有一个列出目录内容的函数。

那我怎样才能刷新内容div＆＃39;用php功能？

因此，如果我点击directory_1，它将显示/ var / www / pg / directory_1文件夹，然后如果我点击directory_2，它将清除＆＃39;内容＆＃39; 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

Answer 2

而不是清空＆＃39;内容＆＃39; div最初，你可以清空它关于Ajax帖子的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内容

2 个答案: