집 > 기사 > 웹 프론트엔드 > Ajax는 페이지 로딩 및 콘텐츠 삭제를 구현합니다.

Ajax는 페이지 로딩 및 콘텐츠 삭제를 구현합니다.

亚连원래의: 2018-05-22 16:13:051919검색

이 글은 페이지 로딩과 콘텐츠 삭제를 구체적으로 구현하기 위한 ajax 관련 정보를 주로 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.

Ajax의 가장 큰 장점은 로딩 시 로딩 및 삭제가 되지 않는다는 점입니다. 현재 웹 페이지의 대부분은 PHP 코드를 삽입하는 것에 비해 코드 양이 줄어들고 페이지 로딩이 더 빨라집니다. 데이터베이스 과일 테이블을 예로 들어 ajax를 사용하여 작성된 페이지 그리고 과일 삭제, ajax로 작성하는 것은 처음에는 여전히 다소 어색할 수 있으므로 연습으로 생각하십시오.

과일 테이블입니다.

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

과일 이름, 가격, 가격만 표시하도록 선택했습니다. 페이지의 과일 테이블 Origin의 3개 컬럼에 대해서는 다음으로 로딩 처리 페이지를 작성하겠습니다. 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>

위 내용은 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

Ajax는 페이지 로딩 및 콘텐츠 삭제를 구현합니다.

관련 기사