Comment utiliser ajax pour charger des pages et supprimer du contenu-js tutoriel-php.cn

Comment utiliser ajax pour charger des pages et supprimer du contenu

php中世界最好的语言

Libérer： 2018-04-02 11:53:23

original

1344 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser ajax pour charger des pages et supprimer du contenu. Quelles sont les précautions pour utiliser ajax pour charger des pages et supprimer du contenu. Ce qui suit est un cas pratique, prenons un. regarder.

Le plus grand avantage d'ajax est qu'il ne saute pas à la page lors du chargement et de la suppression. La plupart des pages Web choisissent aujourd'hui d'utiliser ajax pour écrire, ce qui réduit le code par rapport à l'intégration du code PHP En même temps, le chargement de la page sera plus rapide. Ce qui suit est le chargement de la page et la suppression des fruits écrits en ajax en utilisant la base de données fruit table comme exemple. Il peut encore être un peu maladroit d'écrire en ajax au niveau du site. 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. Ensuite, nous allons écrire la page de traitement de chargement, créer un fichier php et charger jiazaiym.php

Une fois le code de la page écrit, vous pouvez écrire formellement en ajax. Ceux-ci doivent être écrits dans main.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

<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. J'écris toujours les virgules sous forme de points-virgules, mais le résultat n'est pas valide. , après avoir vérifié que le code était correct, j'ai découvert que la virgule était 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.

La prochaine fois que je voudrai réécrire un ajax, je constaterai qu'il ne s'exécutera pas après l'écriture, car la classe à l'intérieur n'est pas reconnue lors de la suppression de la page lors du chargement de la page, ce qui m'oblige pour le supprimer dans Dans l'ajax chargé, le chargement est encapsulé dans une méthode, qui peut être appelée lors de la suppression.

<?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

Il n'y aura aucun problème si vous l'écrivez de cette façon.

<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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser Ajax pour réaliser une connexion contextuelle

Étapes Ajax+bootstrap pour optimiser l'expérience utilisateur Web

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!