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

Comment utiliser ajax pour charger des pages et supprimer du contenu

高洛峰

Libérer： 2023-03-06 14:40:01

original

1177 Les gens l'ont consulté

Le plus grand avantage d'ajax est que la page ne sautera pas lors du chargement et suppression La plupart des pages Web actuelles choisissent d'utiliser ajax pour écrire, ce qui réduit la quantité de code par rapport à l'intégration de code PHP. En même temps, la page de chargement sera également plus rapide.

Ce qui suit est une page de chargement et une suppression de fruits écrite en utilisant ajax en utilisant la table de fruits de la base de données comme exemple. Il peut encore être un peu maladroit d'écrire en utilisant ajax. au début, alors traitez-le simplement comme ExerciceD'accord

Comment utiliser ajax pour charger des pages et supprimer du contenu

C'est la table des fruits

Ce qui suit est le code du page d'accueil. Créez d'abord un fichier phpmain.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 nom du fruit, prix et origine dans le tableau des fruits de la page Suivant. nous allons écrire la page de traitement de chargement et créer un fichier php, 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 officiellement é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 : lors de l'écriture 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 ne peut pas être affiché. Après avoir vérifié que le code est correct, j'ai constaté que les virgules étaient. mal écrit. 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éer un fichier php shanchu.php. et c'est presque la même chose que d'intégrer directement php auparavant

<?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 fonctionnera pas après l'écriture, car la classe à l'intérieur n'est pas reconnue quand. le supprimer lors du chargement de la page, ce qui m'oblige à mettre la suppression dans l'ajax chargé. En même temps, le chargement est encapsulé dans une méthode, qui peut être appelée 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

De cette façon là. il n'y aura aucun problème par écrit.

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!