如何使用Ajax调用复选框删除多个

时间:2016-10-18 13:25:07

标签: php jquery ajax checkbox sql-delete

我试图用复选框删除值,使用ajax调用可以帮助我。

无法找到错误,这是一个模板,我有一个内置的检查功能,所以需要更改任何内置代码的复选框 这是我的上市表格:

<form id="stafflistForm">
<input type="hidden" name="checkedids" value="<?php echo $staffResults['id_staff']; ?>">
<button id="deleteChecked"><i class="fa fa-trash-o"></i></button>
</form>

这是我的Ajax脚本:

<script language="JavaScript">  
    $("#deleteChecked").click(function()
    {
        $("#delshowMessageDiv").hide();
        $("#delshowMessage").html('');
        $.ajax({
            url: "staffcontroller.php",
            method: "POST",
            data: { delData : $("#stafflistForm").serialize(), 'action':'delete'},
            dataType: "json",
            success: function (response) {
                if(response["success"]==true)
                {
                    $("#delshowMessageDiv").hide();
                    $("#delshowSuccessMessageDiv").show();
                    $("#delshowSuccessMessage").html(response["message"]);
                    }else{
                    $("#delshowMessageDiv").show();
                    $("#delshowMessage").html(response["message"]);
                }   
            },
            error: function (request, status, error) {
                $("#hshowMessageDiv").show();
                $("#hshowMessage").html("OOPS! Something Went Wrong Please Try After Sometime!");
            }
        });
        return false;
    });     
</script>

这是我的控制器页面:

else if($_REQUEST['action']=='delete'){
    $delids=explode(",",$_REQUEST["checkedids"]);
    $count=count($delids);
    for($i=0;$i<$count;$i++)
    {
        $delQuery= $conn->query("DELETE FROM os_staff WHERE id_staff=".$delids[$i]);
    }
        if($delQuery){
        $response['message'] = "<strong>Success!</strong>Staff Deleted Successfully.";
        $response['success'] = true;
        }else{
        $response['message'] = "<strong>Warning!</strong> Staff Not Deleted.Please Check Carefully..";
        $response['success'] = false;
    }
    echo json_encode($response);
    exit;
}

2 个答案:

答案 0 :(得分:1)

PHP脚本应通过以下方式设置正确的mime类型:

header('Content-type: application/json');

除此之外:为什么你有错误和成功消息的单独DIV容器?为什么不提供一个&#34;反馈&#34; div,它获取一个CSS类来进行格式化(基于错误或成功)。

答案 1 :(得分:1)

首先:如果你使用它,请不要使用html属性id multipli id =“deleteChecked”。请改用类选择器或数据属性。

这是一个小脚本,向您展示如何改进代码。 这应该可以帮助您解决问题。

$(document).ready(function() {
  
  $('.delete-user').on('click', function(e) {
    // do here your ajax
    
    // this is just example
    $(this).parents('tr').remove();
    
  });
  
});
.fa-trash-o {
  padding: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <form class="stafflistForm">
        <input type="hidden" name="checkedids" value="<?php echo $staffResults['id_staff']; ?>">
        <button class="delete-user"><i class="fa fa-trash-o"></i></button>
      </form>
    </td>
    <td>Tom</td>
  </tr>  
  <tr>
    <td>
      <form class="stafflistForm">
        <input type="hidden" name="checkedids" value="<?php echo $staffResults['id_staff']; ?>">
        <button class="delete-user"><i class="fa fa-trash-o"></i></button>
      </form>
    </td>
    <td>Peter</td>
  </tr> 
  <tr>
    <td>
      <form class="stafflistForm">
        <input type="hidden" name="checkedids" value="<?php echo $staffResults['id_staff']; ?>">
        <button class="delete-user"><i class="fa fa-trash-o"></i></button>
      </form>
    </td>
    <td>Son Goku</td>
  </tr> 
  <tr>
    <td>
      <form class="stafflistForm">
        <input type="hidden" name="checkedids" value="<?php echo $staffResults['id_staff']; ?>">
        <button class="delete-user"><i class="fa fa-trash-o"></i></button>
      </form>
    </td>
    <td>Gozilla</td>
  </tr>   
</table>