ajax 는 페이지 로 딩 과 내용 삭 제 를 실현 합 니 다.

4554 단어 ajax페이지 로 딩내용 삭제
ajax 의 가장 큰 장점 은 로 딩 과 삭제 할 때 페이지 를 뛰 어 넘 지 않 는 다 는 것 입 니 다.현재 웹 페이지 는 대부분 ajax 로 쓰 는 것 을 선택 합 니 다.PHP 코드 를 끼 워 넣 는 것 보다 코드 양 을 줄 이 고 로 딩 페이지 도 빠 를 수 있 습 니 다.다음은 ajax 가 데이터베이스 fruit 표를 예 로 들 어 쓴 로 딩 페이지 와 과일 을 삭제 하 는 것 입 니 다.처음에 ajax 로 쓸 수 있 지만 비교적 손 설 수 있 습 니 다.연습 했다 고 생각해.
이것 은 fruit 시계 입 니 다.

 다음은 첫 페이지 의 코드 입 니 다.먼저 phop 파일 main.phop 을 만 듭 니 다.

<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>
제 가 선택 한 것 은 페이지 에 fruit 표 에 있 는 과일 이름 가격 과 산지 세 열 만 표시 하 는 것 입 니 다.다음은 로 딩 처리 페이지 를 작성 하 겠 습 니 다.phop 파일,jiazai m.phop 를 만 들 겠 습 니 다.

 <?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.phop 에 쓸 것 입 니 다.

<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='button' ids='"+lie[0]+"' class='sc' value='  '/></td></tr>"

   }
   $("#tb").html(str);
  }
 })
</script>
메모:ajax 를 쓸 때 안에 있 는 분점 과 쉼표 에 특히 주의해 야 합 니 다.저 는 항상 쉼표 를 분점 으로 써 서 출력 할 수 없습니다.코드 가 틀 리 지 않 았 는 지 확인 한 후에 야 쉼표 가 잘못 썼 다 는 것 을 알 게 되 었 습 니 다.이것 은 매우 골 치 아 픈 일 입 니 다. 
로 딩 페이지 를 쓴 후에 우 리 는 삭제 페이지 를 쓰기 시작 할 것 입 니 다.phop 파일 shanchu.php 를 만 들 고 페이지 를 삭제 하 는 것 은 매우 간단 합 니 다.이전에 phop 을 직접 삽입 하 는 것 과 차이 가 많 지 않 습 니 다. 

<?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 를 다시 쓰 려 고 할 때 쓰 고 실행 하지 않 는 것 을 발견 할 수 있 습 니 다.페이지 를 불 러 올 때 안에 있 는 class 가 인식 되 지 않 기 때문에 삭 제 를 불 러 온 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='button' ids='" + lie[0] + "' class='sc' value='  '/></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 기초 및 등록 강좌
ajax 로그 인 기능 구현

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage