Question

我通过php从数据库加载数据，代码如下：

<div>

<?php 
    echo "The subjects that you can tutor are:<br>";
    for ($i=0;$i<count($tutor_subj);$i++){
        $query_tutors = "SELECT level, subject 
                           FROM level, subject 
                         WHERE level.id = '$tutor_lvl[$i]' 
                         AND subject.id = '$tutor_subj[$i]'";

        $result_t = mysqli_query($db_conx, $query_tutors);
        while($m = mysqli_fetch_array($result_t)){
           echo "<div class='torem'>".$m['level'] ." ". $m['subject']." ".$tutor_top[$i].
                   "<div style='float:right; padding-right:5px;'>
                      <a href='#'>
                          <img src='images/remove_btn.png' onclick='removeSubj(".$log_id.",".$tutor_lvl[$i].",".$tutor_subj[$i].",\"".$tutor_top[$i]."\")'>
                      </a>
                    </div>
                  </div></br>";
        }
    }

使用removeSubj函数我想从页面中删除此条目但没有页面刷新。目前ajax调用从数据库中删除了条目，但是我需要重新加载页面以查看页面上的更改 - 有没有什么方法可以让条目在没有页面刷新的情况下逐渐消失？

这是removeSubj函数 - 任何人都可以建议我如何实现这个目标吗？

function removeSubj(id, level, subject, topic){

   var con = confirm("Are you sure you would like to remove this subject?");
    if(con == true){
        $.ajax({
           type: 'POST',
           url: 'php_parsers/removeSubjects.php',
           data: {
              "id": id, 
              "level": level, 
              "subject": subject,
              "topic": topic
             },
           success:function(data, response, xhr){

             if (response == "success"){
                 /*    window.location.reload(); */
             }
           },
           error:function(){
              // failed request; give feedback to user
              $('#ajax-panel').html('<p class="error"><strong>Oops!</strong> Try that again in a few moments.</p>');
           }
       });
    }else {
       donothing();
    }
}

Answer 1

基本上你只需要：

success: function (data) {
   $('#ajax-panel').html(data);
}

获取返回的数据并将其作为html插入到div中。如果您的服务器端脚本没有返回要显示的数据，那么只需让jquery为您执行此操作：

success: function() {
  $('#ajax-panel').text('Success!');
}

Answer 2

您需要在要隐藏的div上具有唯一标识符。将id添加到div应该有效：

while ($m = mysqli_fetch_array($result_t)) {
    echo "<div class='torem' id='{$m['my_unique_id']}'>" . $m['level'] . " " . $m['subject'] . " " . $tutor_top[$i] .
        "<div style='float:right; padding-right:5px;'>
            <a href='#'>
                <img src='images/remove_btn.png' onclick='removeSubj(" . $log_id . "," . $tutor_lvl[$i] . "," . $tutor_subj[$i] . ",\"" . $tutor_top[$i] . "\")'>
    </a>
</div>
</div></br>";

然后你可以在成功时隐藏或删除div：

success: function (data, response, xhr) {
    if (response == "success") {
        $('#my_unique_id').hide();
        $('#my_unique_id').remove();
    }
}

删除没有页面刷新的div

2 个答案: