php - CodeIgniter 中使用 AJAX 的删除功能

Question

问题已解决..我相应地更新了我的代码..谢谢大家

简介:我的代码显示消息跟踪数组(每条消息显示在灰色面板中)。用户可以通过单击删除按钮删除不需要的消息，该消息将在数据库中删除并从屏幕上消失。

似乎我的删除功能不起作用..感谢建议..我不知道AJAX..这是我第一次尝试。提前致谢。

以下是我的代码:

ajax代码:

$(document).ready(function(){
    $("body").on("click", "#responds .del_button", function(e) {
        e.preventDefault();
         var $btn = $(this),
             $li = $btn.closest('li');

        var traceId = $li.data('trace-id');

        jQuery.ajax({
                  type: 'post', 
                  url: 'traceDelete', 
                  dataType: 'text',

                  data: { 'traceId': traceId },

                  success: function (res) {
                      if (res === '1') {
                          $btn.fadeOut();
                      }
                  },
                  error: function (xhr, ajaxOptions, thrownError){
                      alert(thrownError);
                  }
        });
    });

部分查看代码:

<ul id="responds">
    <?php foreach ($line as $dataName => $contents){ ?>    
        <li data-trace-id="<?php echo $contents->trace_id; ?>">
            <div class="grey-panel" style="text-align:right">
                <div class="del_wrapper" id="<?php echo $contents->trace_id; ?>">
                    <a href="#" class="del_button" id="<?php echo $contents->trace_id; ?>" data-hover="tooltip" title="Delete this message <?php echo $contents->trace_id; ?>"  >
                        <i class="fa fa-times"></i>
                     </a>
                </div>
                <div class="col-sm-12 col-xs-12">
                  <?php print $contents->trace_hdr.'<br />';
                  print $contents->trace_src.'<br />';
                  print $contents->trace_dest.'<br />';
                  // some other things ?>
                </div>
            </div>
        </li> 
    <?php } ?>
</ul>

Controller 代码:

public function traceDelete($traceID) {
    if ($traceId = $this->input->post('traceId')) {
    return $this->model_general->deleteTrace($traceId);
    }
    return false;
}

型号代码:

public function deleteTrace($id) {
    $this->db->where('trace_id', $id);
    $this->db->delete('trace_tbl');
    return $this->db->affected_rows() > 1 ? true:false;
}

Answer 1

首先，您使用的 id 属性是错误的。它们应该是唯一的，就像出现在一个元素上一样，而不是像您所做的那样出现在多个元素上。 (同样，id 属性不能以数字开头。)实际上没有必要将其放在多个包含元素上，因为您可以使用 jQuery 的 .find() 轻松遍历到父级或子级。 , .parent() , .closest() ，和other traversing methods 。但是，这不应该是导致您出现问题的原因。

现在，我认为问题的原因是您将 id 属性的第二个字符传递到 AJAX 请求中。

$(document).ready(function(){
    $("body").on("click", "#responds .del_button", function(e) {
        e.preventDefault();
        // assign the ID e.g. "abc" to clickedID
        var clickedID = this.id; 
        // problem: assign the second character of your ID i.e. "b" into DbNumberID
        var DbNumberID = clickedID[1];
        // assign the same value to myData (which is redundant)
        var myData = DbNumberID; 

        $(this).hide(); 

        jQuery.ajax({
            type: "POST", 
            url: 'traceDelete', 
            dataType:"text", 
            // sending "myData=b"
            data: { myData: myData }, 
            success:function(traceDelete){
                alert("Deleted");
                $(DbNumberID).fadeOut();
            },
            error:function(xhr, ajaxOptions, thrownError){
                alert(thrownError);
            }
        });
});

我对 CodeIgniter 不太熟悉了，但是您需要从 $_REQUEST 或 $_POST 数组中获取值或使用它们的 built-in function .

$myData = $this->input->post('myData'); // because you are sending myData

编辑

这尚未经过测试，但我会这样做。

HTML

首先，我们使用HTML5 data attribute称之为data-trace-id。这将用来代替您对 id 属性的大量不当使用。

<ul id="responds">
<?php foreach ($line as $dataName => $contents) : ?>    
    <li data-trace-id="<?php echo $contents->trace_id ?>">
        <div class="grey-panel" style="text-align: right">
            <div class="del_wrapper">
                <a href="#" class="del_button" data-hover="tooltip" title="Delete this message <?php echo $contents->trace_id ?>">
                    <i class="fa fa-times"></i>
                </a>
            </div>
            <div class="col-sm-12 col-xs-12">
                <?php echo $contents->trace_hdr ?><br />
                <?php echo $contents->trace_src ?><br />
                <?php echo $contents->trace_dest ?><br />
                <!-- etc -->
            </div>
        </div>
    </li> 
<?php endforeach ?>
</ul>

JavaScript

接下来，让我们简化您的 JavaScript。我将使用可怕的 alert() 进行调试 - 但通常最好使用 console.log()。

$(function() {
    $("#responds").on("click", ".del_button", function (e) {
        e.preventDefault();

        // keyword 'this' refers to the button that you clicked;
        // $(this) make a jQuery object out of the button;
        // always good idea to cache elements that you will re-using;
        var $li = $(this).closest('li');

        // get the associated trace ID from the list-item element;
        var traceId = $li.data('trace-id');

        alert('trace ID ' + traceId);

        // assuming you only want to hide the message only if it has been been successfully deleted from the DB?
        // if that is the case, then you have to wait for the AJAX response to tell you whether it was
        jQuery.ajax({
            type: 'post', 
            url: 'traceDelete', 
            dataType: 'text',
            // notice how I am using 'traceId'? on the server-side, the data will accessible by using $_POST['traceId'] or $this->input->post('traceId') 
            data: { 'traceId': traceId },
            // look at the response sent to you;
            // if I am not mistaken (boolean) true and false get sent back as (strings) 1 or 0, respectively;
            // so if the response is 1, then it was successfully deleted
            success: function (res) {
                alert('AJAX response ' + res);
                if (res === '1') {
                    alert('hiding button');
                    // hide the message
                    $li.fadeOut();
                }
            },
            error: function (xhr, ajaxOptions, thrownError){
                alert(thrownError);
            }
        });
    });
});

PHP

最后，我们从 $_POST 数组中获取值。检查是否有值:如果有，则删除该项；否则忽略它。

public function traceDelete() 
{
    if ($traceId = $this->input->post('traceId')) {
        echo $this->model_general->deleteTrace($traceId) ? '1' : '0';
    }
    echo '0';
}