Ajax를 사용하여 페이지를 로드하고 콘텐츠를 삭제하는 방법-JS 튜토리얼-php.cn

Ajax를 사용하여 페이지를 로드하고 콘텐츠를 삭제하는 방법

php中世界最好的语言

풀어 주다： 2018-04-02 11:53:23

원래의

1306명이 탐색했습니다.

이번에는 ajax를 사용하여 페이지를 로드하고 콘텐츠를 삭제하는 방법과 notes를 사용하여 페이지를 로드하고 콘텐츠를 삭제하는 방법을 보여드리겠습니다. 다음은 실제 사례입니다.

Ajax의 가장 큰 장점은 로드 및 삭제 시 페이지로 이동하지 않는다는 것입니다. 오늘날 대부분의 웹 페이지는 PHP 코드를 삽입하는 것에 비해 코드 양이 줄어들고, 페이지 로딩도 빠릅니다. 다음은 데이터베이스의 과일 테이블을 예로 들어 ajax를 사용하여 작성한 로딩 페이지 및 과일 삭제입니다. 처음에 ajax를 사용하여 작성하는 것은 다소 서툴 수 있으므로 생각하십시오. 연습으로.

과일 테이블은 다음과 같습니다.

다음은 홈페이지 코드입니다. 먼저 PHP 파일 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>

로그인 후 복사

을 생성하고 과일 이름, 가격, 원산지 세 열만 표시하도록 선택했습니다. 페이지의 과일 테이블, 이제 로딩 처리 페이지를 작성하고 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;
?>

로그인 후 복사

을 생성하겠습니다. 로딩 페이지 코드가 작성된 후 공식적으로 ajax를 작성할 수 있으며 이는 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>

로그인 후 복사

주의 사항: Ajax 작성 시 안에 세미콜론과 쉼표를 특히 주의하세요. 저는 항상 쉼표를 세미콜론으로 썼는데, 코드를 확인해 보니 쉼표로 작성되어 있는 것을 발견했습니다. .. 틀렸어요. 정말 골치가 아프네요.

로딩 페이지를 작성한 후, 삭제 페이지 작성을 시작해야 합니다. shanchu.php 파일을 생성하세요. 페이지 삭제는 매우 간단하며, 직전에 PHP를 삽입하는 것과 거의 같습니다.

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

로그인 후 복사

다음으로 Ajax를 다시 작성하려고 할 때 페이지가 로드될 때 내부 클래스가 인식되지 않기 때문에 작성 후에 실행되지 않는다는 것을 알게 되므로 로드된 Ajax에 삭제를 넣어야 합니다. 동시에 로딩은 삭제 시 호출될 수 있는 메서드로 캡슐화됩니다.

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

로그인 후 복사

이렇게 써도 문제 없을 것 같아요.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!