How to use ajax to load pages and delete content-PHP Tutorial-php.cn

How to use ajax to load pages and delete content

高洛峰

Release： 2023-03-06 14:40:01

Original

1187 people have browsed it

The biggest advantage of ajax is that the page will not jump when loading and deleting. Most of the current web pages will choose to use ajax to write, which reduces the amount of code compared to embedding PHP code. At the same time The loading page will also be faster.

The following is a loading page and fruit deletion written using ajax using the database fruit table as an example. It may still be a bit clumsy to write using ajax at the beginning, so just treat it as ExerciseOkay

How to use ajax to load pages and delete content

This is the fruit table

The following is the code for the homepage, first create a php filemain.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>

Copy after login

I chose to display only the three columns of fruit name, price and origin in the fruit table on the page. Next we will write the loading processing page and create a php file, 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;
?>

Copy after login

After the loading page code is written, you can officially write ajax. These are to be written in 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>

Copy after login

Note: When writing ajax, pay special attention to the contents inside. Semicolons and commas, I always write commas as semicolons, and the result cannot be output. After checking that the code is correct, I found that the comma was written wrong. This is a very troublesome thing

After writing the loading page, we have to start writing the deletion page. Create a php file shanchu.php. Deleting the page is very simple and it is almost the same as directly embedding php before.

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

Copy after login

Next, I will When I want to rewrite an ajax, I will find that it will not run after writing, because the class inside is not recognized when the page is loaded. This requires me to put the deletion into the loaded ajax and encapsulate the loading into a method. Just call it when deleting

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

Copy after login

There will be no problem in writing it.

The above is the detailed content of How to use ajax to load pages and delete content. For more information, please follow other related articles on the PHP Chinese website!