Maison > Article > interface Web > Comment utiliser ajax pour supprimer des données et afficher les détails

Comment utiliser ajax pour supprimer des données et afficher les détails

php中世界最好的语言original: 2018-04-02 10:37:033141parcourir

Cette fois, je vais vous montrer comment utiliser ajax pour supprimer des données et afficher les détails. Quelles sont les précautions pour utiliser ajax pour supprimer des données et afficher les détails. Ce qui suit est un cas pratique, prenons un. regarder.

Utilisez bootstrap, jquery et ajax pour afficher certaines données, ajoutez une fonction de suppression et cliquez pour faire apparaître la fonction de détails de la boîte modale

Page d'accueil Main.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link type="text/css" href="../FENGZHUANG/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" /> //引入bootstrap的css文件
<script src="../FENGZHUANG/jquery-3.1.1.min.js"></script> //先引入jquery的js文件
<script src="../FENGZHUANG/bootstrap/js/bootstrap.min.js"></script> //再引入其它的js文件
<style type="text/css">
.xq{ margin-left:30px}
</style>
</head>
<body>
<p class="page-header">
 <h1>显示数据
 </h1>
</p>
<table class="table table-hover">
 <thead>
 <tr>
 <th width="30%">代号</th>
 <th width="30%">名称</th>
 <th width="40%">操作</th>
 </tr>
 </thead>
 <tbody id="tb">
 //用js向其中添加内容
 </tbody>
</table>
<!-- 模态框（Modal） -->
<p class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <p class="modal-dialog">
 <p class="modal-content">
  <p class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  <h4 class="modal-title" id="myModalLabel">详细信息</h4>
  </p>
  <p class="modal-body" id="nr">
  </p>
  <p class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  </p>
 </p><!-- /.modal-content -->
 </p><!-- /.modal -->
</p>
</body>
<script type="text/javascript">
//加载数据
Load();
//加载数据的方法
function Load()
{
$.ajax({
 url:"jiazai.php",
 dataType:"TEXT",
 success: function(data){
  var str = "";
  var hang = data.split("|"); //根据字符串中的|分解
  for(var i=0;i<hang.length;i++)
  {
   var lie = hang[i].split("^"); //根据字符串中的^分解
   str = str+"<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td><button type=&#39;button&#39; class=&#39;btn btn-info btn-sm sc&#39; code=&#39;"+lie[0]+"&#39;>删除</button><button type=&#39;button&#39; class=&#39;btn btn-primary btn-sm xq&#39; code=&#39;"+lie[0]+"&#39;>查看</button></td></tr>";
  }
  $("#tb").html(str); //向tbody中输出内容
  addshanchu();
  addxiangqing();
  }
 });
}
//给删除按钮加事件的方法
function addshanchu()
{
//删除事件
  $(".sc").click(function(){
   var code = $(this).attr("code"); //获取删除按钮所在的数据的code
   $.ajax({
   url:"shanchu.php",
   data:{code:code},
   dataType:"TEXT",
   type:"POST",
   success: function(d){
    if(d.trim()=="OK")
    {
    alert("删除成功");
    Load(); //删除完需要加载数据
    }
    else
    {
    alert("删除失败");
    }
   }
   });
   })
}
//给查看详情加事件的方法
function addxiangqing()
{
 $(".xq").click(function(){
 //显示模态框
 $('#myModal').modal('show');
 //在模态框里面显示内容
 var code = $(this).attr("code"); //获取哪一条数据
 $.ajax({
  url:"xiangqing.php",
  data:{code:code},
  dataType:"TEXT",
  type:"POST",
  success:function(data){
  var lie = data.split("^"); 
  var str = "<p>民族代号："+lie[0]+"</p><p>民族名称："+lie[1]+"</p>";
  $("#nr").html(str);
  }
 });
 })
}
</script>
</html>

Charger la page de données jiazai.php

<?php
include("../FENGZHUANG/DBDA.class.php");
$db = new DBDA();
$sql = "select * from nation order by code ASC";
$arr = $db->Query($sql);
// 下面实现的字符串是类似这样的n001^汉族|n002^回族|n003^苗族
$str = "";返回主页面的数据是TEXT型，得转换一下
foreach($arr as $v)
{
 $str = $str.implode("^",$v)."|"; //拼接字符串
}
$str = substr($str,0,strlen($str)-1); //去掉末尾的|字符。
echo $str;

Supprimer la page de traitement shanchu.php

<?php
include("../FENGZHUANG/DBDA.class.php");
$db = new DBDA();
$code = $_POST["code"];
$sql = "delete from nation where code=&#39;{$code}&#39;";
if($db->Query($sql,0))
{
 echo "OK";
}
else
{
 echo "NO";
}

Voir la page de détails xiangqing.php

<?php
$code = $_POST["code"];
include("../fengzhuang/DBDA.class.php");
$db = new DBDA();
$sql = "select * from nation where code=&#39;{$code}&#39;";
echo $db->StrQuery($sql);

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article Pour plus de passionnant. Pour plus d'informations, veuillez prêter attention aux autres sites Web chinois php Articles connexes !

Lecture recommandée :

jQuery+Ajax détermine si le code de vérification saisi réussit

La requête inter-domaines Ajax ne peut pas utiliser de cookie

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée du graphique et du texte de la requête de pagination AjaxArticle suivant：Explication détaillée du graphique et du texte de la requête de pagination Ajax

Articles Liés

Voir plus