So verwenden Sie Ajax zum Laden von Seiten und zum Löschen von Inhalten-js-Tutorial-php.cn

So verwenden Sie Ajax zum Laden von Seiten und zum Löschen von Inhalten

php中世界最好的语言

Freigeben： 2018-04-02 11:53:23

Original

1346 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie Ajax zum Laden von Seiten und zum Löschen von Inhalten verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung von Ajax zum Laden von Seiten und zum Löschen von Inhalten? sehen.

Der größte Vorteil von Ajax besteht darin, dass es beim Laden und Löschen nicht zur Seite springt. Heutzutage verwenden die meisten Webseiten Ajax zum Schreiben, wodurch der Code im Vergleich zum Einbetten von PHP-Code Gleichzeitig wird das Laden der Seite schneller sein. Das Folgende ist das Laden der Seite und das Löschen von Früchten am Beispiel der Datenbank-Fruchttabelle. Es kann immer noch etwas umständlich sein, mit Ajax zu schreiben Betrachten Sie es einfach als Übung.

Dies ist die Obsttabelle:

Das Folgende ist der Code für die Homepage. Erstellen Sie zunächst eine PHP-Datei 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>

Nach dem Login kopieren

Ich habe mich dafür entschieden, nur die drei Spalten Fruchtname, Preis und Herkunft in der Fruchttabelle auf der Seite anzuzeigen. Als Nächstes schreiben wir die Ladeverarbeitungsseite, erstellen eine PHP-Datei und laden 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;
?>

Nach dem Login kopieren

Nachdem der Seitencode geschrieben wurde, können Sie offiziell Ajax schreiben. Diese müssen in main.php geschrieben werden.

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

Nach dem Login kopieren

Hinweis: Achten Sie beim Schreiben von Ajax besonders auf die darin enthaltenen Semikolons und Kommas. Ich schreibe Kommas immer als Semikolons, aber das Ergebnis ist ungültig Nachdem ich überprüft hatte, ob der Code korrekt war, stellte ich fest, dass das Komma falsch geschrieben war. Dies ist eine sehr problematische Sache.

Nachdem wir die Ladeseite geschrieben haben, müssen wir mit dem Schreiben der Löschseite beginnen. Das Löschen der Seite ist sehr einfach und entspricht fast dem direkten Einbetten von PHP.

<?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";
}

Nach dem Login kopieren

Wenn ich als nächstes einen Ajax neu schreiben möchte, werde ich feststellen, dass er nach dem Schreiben nicht ausgeführt wird, da die darin enthaltene Klasse beim Löschen der Seite beim Laden der Seite nicht erkannt wird, was erforderlich ist Ich möchte es löschen. Im geladenen Ajax ist das Laden in eine Methode gekapselt, die beim Löschen aufgerufen werden kann.

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

Nach dem Login kopieren

Es wird kein Problem sein, wenn Sie es so schreiben.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie man Ajax verwendet, um eine Popup-Anmeldung zu realisieren

Ajax+Bootstrap-Schritte zur Optimierung der Webbenutzererfahrung

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Ajax zum Laden von Seiten und zum Löschen von Inhalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!