Maison interface Web js tutoriel Ajax implémente les fonctions de suppression de données et d'affichage des détails

Ajax implémente les fonctions de suppression de données et d'affichage des détails

Jan 01, 2018 pm 06:26 PM
ajax 删除 查看

Cet article présente principalement les fonctions de suppression de données et d'affichage des détails via ajax, qui est une bonne référence et une bonne valeur pour apprendre ajax. Suivons l'éditeur et jetons un coup d'œil à cet article sur les fonctions d'ajax de suppression de données et d'affichage des détails

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

Page principale 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(){
 //显示模态框
 $(&#39;#myModal&#39;).modal(&#39;show&#39;);
 //在模态框里面显示内容
 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>
Copier après la connexion

Page. chargement des 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;
Copier après la connexion

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";
}
Copier après la connexion

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);
Copier après la connexion

Ce qui précède est tout le contenu de cet article, j'espère qu'il sera utile à l'apprentissage de tous ! !

Recommandations associées :

Compréhension approfondie de l'objet XHR dans le premier article de la série ajax

Format de stockage de données JSON pour l'interaction Ajax avec les utilisateurs

À propos de plusieurs problèmes de requêtes Ajax

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 de ce site Web
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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Est-il vrai que vous pouvez être bloqué et supprimé sur WeChat et ne pas pouvoir être ajouté de manière permanente ? Est-il vrai que vous pouvez être bloqué et supprimé sur WeChat et ne pas pouvoir être ajouté de manière permanente ? Apr 08, 2024 am 11:41 AM

1. Tout d'abord, il est faux de bloquer et de supprimer définitivement quelqu'un et de ne pas l'ajouter de manière permanente. Si vous souhaitez ajouter l'autre partie après l'avoir bloquée et supprimée, vous n'avez besoin que du consentement de l'autre partie. 2. Si un utilisateur bloque quelqu'un, l'autre partie ne pourra pas envoyer de messages à l'utilisateur, voir son cercle d'amis ou passer des appels avec l'utilisateur. 3. Le blocage ne signifie pas la suppression de l'autre partie de la liste de contacts WeChat de l'utilisateur. 4. Si l'utilisateur supprime l'autre partie de sa liste de contacts WeChat après l'avoir bloqué, il n'y a aucun moyen de récupérer après la suppression. 5. Si l'utilisateur souhaite à nouveau ajouter l'autre partie comme ami, l'autre partie doit accepter et ajouter à nouveau l'utilisateur.

Découvrez les étapes pour supprimer un appareil connecté sur Douyin Découvrez les étapes pour supprimer un appareil connecté sur Douyin Mar 26, 2024 am 09:01 AM

1. Tout d'abord, cliquez pour ouvrir l'application Douyin et cliquez sur [Moi]. 2. Cliquez sur l'icône à trois points dans le coin supérieur droit. 3. Cliquez pour accéder aux [Paramètres]. 4. Cliquez pour ouvrir [Compte et sécurité]. 5. Sélectionnez et cliquez sur [Connexion à la gestion des appareils]. 6. Enfin, cliquez pour sélectionner le périphérique et cliquez sur [Supprimer].

Comment supprimer complètement l'historique des discussions TikTok Comment supprimer complètement l'historique des discussions TikTok May 07, 2024 am 11:14 AM

1. Ouvrez l'application Douyin, cliquez sur [Message] en bas de l'interface, puis cliquez sur l'entrée de conversation de chat qui doit être supprimée. 2. Appuyez longuement sur n'importe quel enregistrement de discussion, cliquez sur [Sélection multiple] et vérifiez les enregistrements de discussion que vous souhaitez supprimer. 3. Cliquez sur le bouton [Supprimer] dans le coin inférieur droit et sélectionnez [Confirmer la suppression] dans la fenêtre contextuelle pour supprimer définitivement ces enregistrements.

Comment envoyer des fichiers à d'autres sur TikTok ? Comment supprimer les fichiers que j'ai envoyés à d'autres ? Comment envoyer des fichiers à d'autres sur TikTok ? Comment supprimer les fichiers que j'ai envoyés à d'autres ? Mar 22, 2024 am 08:30 AM

Sur Douyin, les utilisateurs peuvent non seulement partager les détails de leur vie et leurs talents, mais également interagir avec d'autres utilisateurs. Dans ce processus, nous devons parfois envoyer des fichiers à d'autres utilisateurs, tels que des images, des vidéos, etc. Alors, comment envoyer des fichiers à d’autres sur Douyin ? 1. Comment envoyer des fichiers à d'autres sur Douyin ? 1. Ouvrez Douyin et entrez dans l'interface de discussion où vous souhaitez envoyer des fichiers. 2. Cliquez sur le signe « + » dans l'interface de discussion et sélectionnez « Fichier ». 3. Dans les options de fichiers, vous pouvez choisir d'envoyer des images, des vidéos, de l'audio et d'autres fichiers. Après avoir sélectionné le fichier que vous souhaitez envoyer, cliquez sur « Envoyer ». 4. Attendez que l'autre partie accepte votre fichier. Une fois que l'autre partie l'aura accepté, le fichier sera transféré avec succès. 2. Comment supprimer les fichiers envoyés à d'autres sur Douyin ? 1. Ouvrez Douyin et saisissez le texte que vous avez envoyé.

Comment puis-je récupérer le commentaire supprimé de quelqu'un d'autre sur Xiaohongshu ? Sera-t-il affiché si le commentaire de quelqu'un d'autre est supprimé ? Comment puis-je récupérer le commentaire supprimé de quelqu'un d'autre sur Xiaohongshu ? Sera-t-il affiché si le commentaire de quelqu'un d'autre est supprimé ? Mar 21, 2024 pm 10:46 PM

Xiaohongshu est une plateforme sociale de commerce électronique populaire, et les commentaires interactifs entre utilisateurs sont une méthode de communication indispensable sur la plateforme. Parfois, nous pouvons constater que nos commentaires ont été supprimés par d’autres, ce qui peut prêter à confusion. 1. Comment puis-je récupérer les commentaires supprimés de quelqu'un d'autre sur Xiaohongshu ? Lorsque vous constatez que vos commentaires ont été supprimés, vous pouvez d'abord essayer de rechercher directement des articles ou des produits pertinents sur la plateforme pour voir si vous pouvez toujours retrouver le commentaire. Si le commentaire est toujours affiché après avoir été supprimé, il a peut-être été supprimé par le propriétaire de la publication d'origine. À ce stade, vous pouvez essayer de contacter le propriétaire de la publication d'origine pour lui demander la raison de la suppression du commentaire et demander sa restauration. Si un commentaire a été complètement supprimé et est introuvable sur la publication d’origine, les chances qu’il soit réintégré sur la plateforme sont relativement minces. Vous pouvez essayer d'autres façons

Comment vérifier votre propre identifiant sur Xianyu_Introduction à la façon de vérifier votre pseudo personnel sur Xianyu Comment vérifier votre propre identifiant sur Xianyu_Introduction à la façon de vérifier votre pseudo personnel sur Xianyu Mar 22, 2024 am 08:21 AM

En tant que plateforme de trading, Xianyu vous demande de vous inscrire et de vous connecter à votre compte avant de l'utiliser. Les utilisateurs peuvent définir un nom d'identification pour leur compte. Et s'ils souhaitent vérifier quel est leur identifiant ? Découvrons ensemble ci-dessous ! Une introduction à la façon de vérifier votre pseudo personnel sur Xianyu. Tout d'abord, démarrez l'application Xianyu. Après être entré sur la page d'accueil, passez à la page de vente d'inactivité, de messages et de moi, et cliquez sur l'option [Mon] dans le coin inférieur droit. 2. Ensuite, sur ma page, nous devons cliquer sur [Avatar] dans le coin supérieur gauche ; 2. Ensuite, lorsque nous accédons à la page d'accueil personnelle, nous pouvons voir différentes informations. Nous devons cliquer sur le bouton [Modifier les informations] ici ; 4. Enfin, cliquez sur Nous pourrons le voir plus tard sur la page où nous modifions les informations ;

Où vérifier les classements musicaux sur NetEase Cloud Music_Comment vérifier les classements musicaux sur NetEase Cloud Music Où vérifier les classements musicaux sur NetEase Cloud Music_Comment vérifier les classements musicaux sur NetEase Cloud Music Mar 25, 2024 am 11:40 AM

1. Après avoir allumé le téléphone, sélectionnez NetEase Cloud Music. 2. Après avoir accédé à la page d'accueil, vous pouvez voir la [Liste de classement] et cliquer pour entrer. 3. Dans la liste de classement, vous pouvez sélectionner n'importe quelle liste et cliquer sur [Nouvelle liste de chansons]. 4. Sélectionnez votre chanson préférée et cliquez dessus. 5. Revenez à la page précédente pour voir plus de listes.

Astuce pratique PHP : supprimez le dernier point-virgule de votre code Astuce pratique PHP : supprimez le dernier point-virgule de votre code Mar 27, 2024 pm 02:24 PM

Conseils pratiques PHP : Supprimer le dernier point-virgule du code Lors de l'écriture de code PHP, vous rencontrez souvent des situations où vous devez supprimer le dernier point-virgule du code. Cela peut être dû au fait que le copier-coller introduit des points-virgules supplémentaires ou à l'optimisation du style et de la structure du code. Dans cet article, nous présenterons quelques méthodes pour supprimer le dernier point-virgule du code PHP et fournirons des exemples de code spécifiques. Méthode 1 : utiliser la fonction substr La fonction substr peut renvoyer une sous-chaîne d'une longueur spécifiée à partir d'une chaîne. nous pouvons

See all articles