Ajax implements page loading and content deletion-JS Tutorial-php.cn

Ajax implements page loading and content deletion

亚连

Release： 2018-05-22 16:13:05

Original

1971 people have browsed it

This article mainly introduces the relevant information of ajax to realize page loading and content deletion in detail. It has certain reference value. Interested friends can refer to it.

The biggest benefit of ajax is that The page will not jump when loading and deleting. Most of today's web pages will choose to use ajax to write. Compared with embedding PHP code, the amount of code is reduced. At the same time, the page will be loaded faster. The following is using ajax to use the database fruit table. Take the loading page and the deletion of fruits as an example. Writing with ajax may be a bit cumbersome at first, 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 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 loaded 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 formally write ajax. These should 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, myself The comma is always written as a semicolon, and the result cannot be output. After checking that the code is correct, I find that the comma is 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 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 re-write an ajax, I will find that it will not run after writing because it is not possible to delete the class inside when loading the page. Identification, this requires me to put the deletion in the loaded ajax, and at the same time encapsulate the loading 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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

PHP is based on reverse ajax Detailed explanation of the steps to implement real-time message push

Interview questions about AJAX (with answers)

Detailed analysis of how to use AJAX (code pasted)

The above is the detailed content of Ajax implements page loading and content deletion. For more information, please follow other related articles on the PHP Chinese website!