Ajax 데이터 삭제 및 데이터 보기 동작

8896 단어 Ajax삭제데이터살펴보다
1.데이터베이스 에서 표 찾기:

색 표
2.홈 페이지
홈 페이지 의 코드 는 tbody 를 사용 합 니 다.
TBODY 역할 은:
표 의 줄 별 다운 로드 를 제어 하여 다운로드 속 도 를 높 일 수 있다.
(웹 페이지 의 열 림 은 먼저 표 의 내용 을 모두 다운로드 한 후에 야 나타 나 고 지점 다운 로드 는 일부 내용 을 먼저 표시 할 수 있어 사용자 의 대기 시간 을 줄 일 수 있다.
TBODY 를 사용 하 는 목적 은 이 포 함 된 코드 를 전체 표 에서 분석 하지 않 고 함께 표시 할 수 있 도록 하 는 것 이다.즉,여러 줄 이 있 으 면 TBODY 줄 을 얻 으 면 한 줄 을 먼저 표시 할 수 있다 는 것 이다.
 BODY 는 HTML 의 텍스트 체 로 하나의 HTML 파일 로 하나의 BODY 만 있 고 TABLE 에는 여러 개의 TBODY 가 있 을 수 있 습 니 다.
TBODY 라 는 탭 은 표 의 줄 을 나 누 어 다운로드 할 수 있 습 니 다.표 의 내용 이 많 을 때 실 용적 입 니 다.줄 을 나 누 어 다운로드 해 야 하 는 곳 에 합 을 더 하면...
예 를 들 면:
 다음 참조 내용:헤드 헤드 헤드 2 먼저 표시 먼저 표시 하고 foot 1 foot 2 표시
 주의:
*1.TBODY 요 소 는 브 라 우 저 에서 렌 더 링 되 지 않 습 니 다
*2.서로 다른 줄 의 셀 이 합 쳐 질 때 각 셀 이 있 는 줄 에 TBODY 탭 을 추가 하지 마 십시오.
알림:TBODY 요소 에 포 함 된 유효한 라벨 은 TD,TH,TR 이 있 습 니 다.이 코드 의 실행 은 효 과 를 볼 수 없습니다.표 의 내용 이 비교적 적 기 때 문 입 니 다.
데이터 양 이 많 고 표 가 많이 끼 워 져 있 을 때 만 효 과 를 볼 수 있다.
홈 페이지 코드:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>     </title>
  <script src="jquery-1.11.2.min.js"></script>
</head>
<body>
<h1>    </h1>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td>  </td>
    <td>  </td>
    <td>  </td>
  </tr>
  <tbody id="td">
  </tbody>
</table>
</body>
</html>
<script>
  $.ajax({
    url:"jiazai.php",
//              data
  dataType:"TEXT",
    success:function(data)
    {
    }
  });
</script>
그림:

리 턴 함수 안 이 비어 있 습 니 다.잠시 후에 다시 쓰 겠 습 니 다.
다음은 페이지 불 러 오기:
표시:배열 을 옮 겨 다 니 며 표 의 내용 을 표시 합 니 다.구체 적 으로:

<?php
include ("db.class.php");
$db = new db();
$sql = "select * from min";
$arr = $db->Query($sql);
//  
$str="";
foreach ($arr as $v)
{
  $str = $str.implode("-",$v)."|";
  // - $v   ,    1- 2- , |  ，    1- |2- |
}
echo $str;
출력 이 무엇 인지 보 겠 습 니 다:

맨 뒤에 세로 줄 이 하나 더 생 겨 서 세로 줄 로 가세 요.

$str = substr($str,0,strlen($str)-1);
//     ：  0   ，      -1
//strlen
다시 보기:

이제 리 셋 함 수 를 쓰 겠 습 니 다:

<script>
  $.ajax({
    url:"jiazai.php",
//              data
  dataType:"TEXT",
    success:function(data)
    {
      var str = "";
      var hang = data.split("|");
      //split     
      for(var i = 0;i<hang.length;i++)
      {
        //         ;    ；
        var lie = hang[i].split("-");
        str = str+
          "<tr><td>"
          +lie[0]+
          "</td><td>"
          +lie[1]+
          "</td><td>  </td></tr>";
      }
      $("#td").html(str);
      //  td html     
    }
  });
</script>
쓰 고 다음 페이지 보기:

3.이제 삭제 라 고 쓸 수 있다.
마지막 셀 에 삭제 단 추 를 추가 하고 홈 키 값 을 전달 합 니 다.

"</td><td>" +
          "<input type='button' ids='"+lie[0]+"' class='sc' value='  ' />" +
          //ids       
          "</td></tr>";
 
삭제 버튼 에 이 벤트 를 추가 하고 Ajax 방법 을 호출 합 니 다.
**
비동기 와 동기 화의 차이 점:
동기 화 는 결 과 를 되 돌려 주 기 를 기 다 려 야 계속 할 수 있 습 니 다.이 보 는 기다 릴 필요 가 없습니다.보통 이 보 의 결 과 를 감청 해 야 합 니 다.
동기 화 는 한 직선 위의 대기 열 이 고,다른 보 도 는 한 대기 열 에서 각각 가 는 것 이 아니다.
**

 //         
      $(".sc").click(function(){
        var ids = $(this).attr("ids");
        $.ajax({
          url:"shanchu.php",
          data:{ids:ids},
          dataType:"TEXT",
          type:"POST",
          success:function (d) {
            
          }
        });
      })
반전 함수 기 다 려 서 쓰기;
처리 페이지 계속 삭제:

<?php
include ("db.class.php");
$db = new db();
$ids = $_POST["ids"];
$sql = "delete from min WHERE ids='{$ids}'";
if($db ->Query($sql,0))
{
  echo "ok";
}
else{
  echo "no";
}
이렇게 보면:

삭 제 를 클릭 하고 삭제 후 페이지 를 새로 고치 지 않 습 니 다.
데 이 터 를 자동 으로 불 러 오 려 면 데 이 터 를 불 러 오 는 코드 를 하나의 방법 으로 밀봉 하고 삭제 할 때 이 방법 을 사용 해 야 합 니 다.읊다,읊조리다
홈 페이지 코드:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>     </title>
  <script src="jquery-1.11.2.min.js"></script>
</head>
<body>
<h1>    </h1>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td>  </td>
    <td>  </td>
    <td>  </td>
  </tr>
  <tbody id="td">
  </tbody>
</table>
</body>
</html>
<script>
  //  load  
  load();
  //            
  function load()
  {
    $.ajax({
      url: "jiazai.php",
//              data
      dataType: "TEXT",
      success: function (data) {
        var str = "";
        var hang = data.split("|");
        //split     
        for (var i = 0; i < hang.length; i++) {
          //         ;    ；
          var lie = hang[i].split("-");
          str = str +
            "<tr><td>"
            + lie[0] +
            "</td><td>"
            + lie[1] +
            "</td><td>" +
            "<input type='button' ids='" + lie[0] + "' class='sc' value='  ' />" +
            //ids       
            "</td></tr>";
        }
        $("#td").html(str);
        //  td html     
        //         
        $(".sc").click(function () {
          var ids = $(this).attr("ids");
          $.ajax({
            url: "shanchu.php",
            data: {ids: ids},
            dataType: "TEXT",
            type: "POST",
            success: function (d) {
              if (d.trim() == "ok") {
                alert("    ");
                //         
                load();
              }
              else {
                alert("    ");
              }
            }
          });
        })
      }
    });
  }
</script>
페이지 코드 삭제:

<?php
include ("db.class.php");
$db = new db();
$ids = $_POST["ids"];
$sql = "delete from min WHERE ids='{$ids}'";
if($db ->Query($sql,0))
{
  echo "ok";
}
else{
  echo "no";
}
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 Ajax 의 데이터 삭제 와 데이터 조회 작업 입 니 다.여러분 께 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
SpringMVC+Ajax+html 문자열 인 스 턴 스 코드
안 드 로 이 드 사용자 정의 컨트롤 깊이 학습 안 드 로 이 드 생 성 랜 덤 인증 코드

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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