Heim  >  Artikel  >  Backend-Entwicklung  >  So verwenden Sie Ajax zum Laden von Seiten und zum Löschen von Inhalten

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

高洛峰
高洛峰Original
2017-03-12 10:06:451120Durchsuche

Der größte Vorteil von Ajax besteht darin, dass die Seite beim Laden und Löschen nicht springt. Die meisten heutigen Webseiten verwenden zum Schreiben Ajax, wodurch die Codemenge im Vergleich zum Einbetten von PHP-Code reduziert wird. Gleichzeitig wird die Ladeseite auch schneller sein.

Das Folgende ist eine mit Ajax geschriebene Ladeseite und das Löschen von Früchten am Beispiel der Datenbank-Fruchttabelle. Das Schreiben mit Ajax kann immer noch etwas umständlich sein am Anfang, also behandle es einfach als ÜbungOkay

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

Das ist der Obsttisch

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

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

Nachdem der Ladeseitencode 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>

Hinweis: Achten Sie beim Schreiben von Ajax besonders auf die darin enthaltenen Semikolons und Kommas. Ich schreibe Kommas immer als Semikolons, aber das Ergebnis kann nicht ausgegeben werden Falsch geschrieben. Das ist eine sehr mühsame Sache

Nachdem wir die Seite zum Löschen geschrieben haben, ist das Löschen der Seite sehr einfach und es ist fast dasselbe wie das direkte Einbetten von PHP zuvor

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

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 nicht erkannt wird Löschen Sie es beim Laden der Seite, was erfordert, dass ich den Löschvorgang in den geladenen Ajax einfüge. Gleichzeitig wird der Ladevorgang 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>

Hier entlang ist schriftlich kein Problem.

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn