如何通过 Ajax 调用使用复选框删除多个
How to delete multiple using checkbox with Ajax call
我正在尝试使用 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;
}
PHP 脚本应通过以下方式设置正确的 MIME 类型:
header('Content-type: application/json');
除此之外:为什么您有单独的 DIV 容器用于错误和成功消息?为什么没有一个 "feedback" div,它得到一个 CSS class 来进行格式化(基于错误或成功)。
首先:不要使用html属性id,如果你使用它multipli id="deleteChecked"。请改用 class 选择器或数据属性。
这是一个小脚本,它向您展示了如何改进您的代码。
那应该可以帮助您解决问题。
$(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>
我正在尝试使用 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;
}
PHP 脚本应通过以下方式设置正确的 MIME 类型:
header('Content-type: application/json');
除此之外:为什么您有单独的 DIV 容器用于错误和成功消息?为什么没有一个 "feedback" div,它得到一个 CSS class 来进行格式化(基于错误或成功)。
首先:不要使用html属性id,如果你使用它multipli id="deleteChecked"。请改用 class 选择器或数据属性。
这是一个小脚本,它向您展示了如何改进您的代码。 那应该可以帮助您解决问题。
$(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>