Ajax implémente le chargement de pages et la suppression de contenu-js tutoriel-php.cn

Ajax implémente le chargement de pages et la suppression de contenu

亚连

Libérer： 2018-05-22 16:13:05

original

1924 Les gens l'ont consulté

Cet article présente principalement les informations pertinentes d'ajax pour implémenter en détail le chargement de page et la suppression de contenu. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Le plus grand avantage d'ajax est que la page le fera. ne saute pas lors du chargement et de la suppression. La plupart des pages Web d'aujourd'hui choisiront d'utiliser ajax pour écrire. Par rapport à l'intégration de code PHP, la quantité de code sera réduite en même temps. pour utiliser la table de fruits de la base de données. Prenons l'exemple de la page de chargement et de la suppression des fruits. Écrire avec ajax peut être un peu fastidieux au début, alors considérez-le simplement comme une pratique.

Voici la table de fruits :

Voici le code de la page d'accueil. Créez d'abord un fichier php main.php

<body>

<h2>内容加载</h2>
<table cellpadding="0" cellspacing="0" border="1" width="100%">
 <tr>
  <td>水果名称</td>
  <td>水果价格</td>
  <td>水果产地</td>
  <td>操作</td>
 </tr>
 <tbody id="tb">

 </tbody>
</table>
</body>

Copier après la connexion

J'ai choisi d'afficher uniquement les trois colonnes de nom du fruit, de prix et d'origine dans le tableau des fruits de la page. Ensuite, nous allons écrire la page de traitement du chargement et créer un php. fichier, jiazaiym .php

 <?php
include("DADB.class.php");
$db=new DADB();
$sql="select * from fruit ";
$arr=$db->Query($sql);
$str="";
foreach($arr as $v)
{
 $str=$str.implode("^",$v)."|"; //每一行之间用“|”连接，这样最后就会多出一个“|”
}
$str=substr($str,0,strlen($str)-1); //把最后多出的“|”用截取字符串的方式删去
echo $str;
?>

Copier après la connexion

Une fois le code de la page de chargement écrit, vous pouvez formellement écrire ajax Ceux-ci doivent être écrits dans main.php.

<script type="text/javascript">
 $.ajax({
  url:"jiazaiym.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[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td><input type=&#39;button&#39; ids=&#39;"+lie[0]+"&#39; class=&#39;sc&#39; value=&#39;删除&#39;/></td></tr>"

   }
   $("#tb").html(str);
  }
 })
</script>

Copier après la connexion

Remarque : Lorsque vous écrivez en ajax, faites particulièrement attention aux points-virgules et aux virgules à l'intérieur de I. écrivez toujours les virgules sous forme de points-virgules, mais le résultat ne peut pas être affiché. Après avoir vérifié que le code est correct, je trouve que la virgule est mal écrite. C'est une chose très gênante.

Après avoir écrit la page de chargement, nous devons commencer à écrire la page de suppression. Créez un fichier php shanchu.php. Supprimer la page est très simple, et c'est presque la même chose que d'intégrer php directement avant.

<?php
$ids=$_POST["ids"];
include("DADB.class.php");
$db=new DADB();
$sql="delete from fruit where ids={$ids}";
if($db->Query($sql,0))
{
 echo"OK";
}
else{
 echo"flase";
}

Copier après la connexion

Ensuite, quand je veux réécrire un ajax, je constaterai qu'il ne s'exécutera pas après l'écriture car l'intérieur est supprimé lorsque la page est chargé. La classe n'est pas reconnue, je dois donc mettre la suppression dans l'ajax chargé, et en même temps encapsuler le chargement dans une méthode, et simplement l'appeler lors de la suppression.

<script type="text/javascript">
 Load();
 function Load() {
  $.ajax({
   url: "jiazaiym.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[1] + "</td><td>" + lie[2] + "</td><td>" + lie[3] + "</td><td><input type=&#39;button&#39; ids=&#39;" + lie[0] + "&#39; class=&#39;sc&#39; value=&#39;删除&#39;/></td></tr>"

    }
    $("#tb").html(str);
    //删除页面
    $(".sc").click(function(){
     var ids=$(this).attr("ids");
    $.ajax({
     url: "shanchu.php",
     data: {ids: ids},
     type: "POST",
     dataType: "TEXT",
     success: function (aa) { //去空格
      if (aa.trim() == "OK") {
       alert("删除成功");
       Load();
      }
      else {
       alert("删除失败");
      }
     }
    })
    })
   }
  })
 }
</script>

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles associés :

Explication détaillée des étapes pour implémenter le push de messages en temps réel en PHP basé sur anti-ajax push

Questions d'entretien sur AJAX (avec réponses)

Une analyse détaillée de la façon d'utiliser AJAX (code collé)

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!