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

How to use ajax to load pages and delete content

php中世界最好的语言

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

Original

1334 people have browsed it

This time I will show you how to use ajax to load the page and delete the content. What are the precautions for using ajax to load the page and delete the content. The following is a practical case, let's take a look.

The biggest advantage of ajax is that it will not jump to the page when loading and deleting. Most of today's web pages will choose to use ajax to write, which reduces the code compared to embedding

PHP code At the same time, the loading of the page will be faster. The following is the loading page and deletion of fruits written using ajax using the database fruit table as an example. It may still be a bit awkward to write using ajax at the beginning, so just think of it as a practice.

This is the fruit table:

The following is the code for the home page. First create a php file 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>

Copy after login

I choose The most important thing is that the page only displays the three columns of fruit name, price and origin in the fruit table. Next we will write the loading processing page, 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

The loading page code is finished After that, you can formally write ajax. These must 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 semicolons and commas inside. I always write commas as semicolons, and the result cannot be output. After checking that the code was correct, I discovered that the comma was written incorrectly. This was 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 embedding php directly 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, 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 deleting the page when loading the page, which requires me to put the deletion in the loaded In ajax, the loading is encapsulated into a method, which can be called 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 is no problem if you write it this way.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!