PHP jQuery+Ajax结合写批量删除功能

最新推荐文章于 2021-08-05 14:32:23 发布

转载最新推荐文章于 2021-08-05 14:32:23 发布 · 1.8k 阅读

文章标签：

#jquery #ajax #php #jquery ajax

Ajax 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用PHP结合jQuery和Ajax实现批量删除功能。通过前端选择要删除的数据，并通过Ajax发送请求到服务器进行批量删除。

好东西要与大家分享本人已经亲自试过非常实用

这篇文章主要介绍了PHP jQuery+Ajax结合写批量删除功能的相关资料,需要的朋友可以参考下

为了美观，我还是引入了bootstrap的模态框，我引入的是自己的数据库 library中的一张表名为：maninfo表是一张个人信息表

表的加载我就不写了，比较简单，大概写一下需要的按钮和html部分就可以了

<button type="button"
class="btn btn-primary" 
id="plscdz" 
>批量删除</button>

全选：

<input type="checkbox"
id="cq"/>

遍历出来的复选框为

<input type="checkbox"
value="{$v[0]}" 
class="cq"/>

首先是全选按钮点击之后可以把遍历的复选框全部选中

<script type="text/javascript">
 $("#cq").click(function(){
$(".cq").prop("checked",$(this).prop("checked"));
})
</script>

这里我只写了一个简单的模态框

<div class="modal fade"
id="myModal11" 
tabindex="-1" role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button"
class="close" 
data-dismiss="modal" 
aria-hidden="true">
                  ×
                </button>
                <h4 class="modal-title"
id="myModalLabel">
                  提示
                </h4>
              </div>
              <div id="qrnr1"
class="modal-body">
                您将删除选中的图书！
              </div>
              <div class="modal-footer">
                <button id="qxplsc"
type="button" 
class="btn btn-default" 
data-dismiss="modal">取消删除</button>
                <button id="qrplsc"
type="button" 
class="btn btn-primary">确认批量删除</button>
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal -->
        </div>
      </div>

这样前端的内容就完成了，这样就开始写js部分了，我全部用的是jquery

var
chk = "";
  var
check2 = "";
  //判断多个复选框中的某一个是否被实现
  function
checked(){
    var
count = 0;
    var
checkx = $("#cq");
    if(checkx.checked)
    {
      check2=1;//选中全选按钮
    }
    else
    {
      check2=0;//没选中全选按钮
    }
    var
checkArry = $(".cq");
    for
(var 
i = 0; i < checkArry.length; i++)
    {
      if(checkArry[i].checked ==
true)
      {
        //选中的操作
        count++;
      }
    }
    if( count == 0 )
    {
      chk=0;//没有选中项
    }
    else
    {
      chk=1;//有选中项
    }
    //alert(chk);
  }
  function
plscdzxx()
  {
    //批量删除
    $("#plscdz").click(function(){
      checked();
      if(chk==1 || check2==1){// 提交
        $('#myModal12').modal('show');
        $("#nqrplsc").click(function(){/*给确认删除按钮加事件*/
          $('#myModal12').modal('hide');
          //找选中的主键值，用循环遍历选中的主键值
          var
cq =$(".cq");
          var
plstr ="";
          for(var
i=0;i<cq.length;i++)
          {
            if(cq.eq(i).prop("checked"))
            {
              plstr+=cq.eq(i).val()+"','";
            }
          }
          plstr= plstr.substr(0,plstr.length-3);
//分隔符占3个字符，截取字符串，去掉最后的"','"，这样正好匹配SQL语句
          $.ajax({
            async:false,
            url:"plscdz.php",
            data:{plstr:plstr},
            dataType:"TEXT",
            type:"POST",
            success:function(data){
              if(data.trim()=="OK")
              {
                alert("删除成功");
                nload(); 
//在这里要重新加载一遍页面
              }
              else
              {
                alert("删除失败");
              }
            }
          });
        });
      }
      else
if(chk==0)
      {
        // 不提交
        //alert(chk);
        alert("请选择您要删除的内容");
      }
    })
  }

ajax会连接到批量删除的处理页面，下面就是批量删除的处理页面了

<?php
session_start();
include("DBDA.class.php");
$db
= new 
DBDA();
if(!empty($_POST["plstr"]))
{
  $plstr
= $_POST["plstr"];
  $sql
= "delete from maninfo where id in ('{$plstr}')";
  if($db->Query($sql,0))
  {
    echo
"OK";
  }
  else
  {
    echo
"NO";
  }
}