집 > 기사 > 웹 프론트엔드 > Ajax의 데이터 삭제 및 데이터 보기 작업 단계에 대한 자세한 설명

Ajax의 데이터 삭제 및 데이터 보기 작업 단계에 대한 자세한 설명

php中世界最好的语言원래의: 2018-04-02 11:20:531981검색

이번에는 Ajax 데이터 삭제 및 보기 작업 단계에 대해 자세히 설명하겠습니다. Ajax 데이터 삭제 및 보기 작업의 주의사항은 무엇인가요?

1. 데이터베이스에서 테이블 찾기:

Color table

2. 메인 페이지

메인 페이지의 코드는

TBODY 기능을 사용합니다. 분기 다운로드로 인해 다운로드 속도가 향상됩니다.

(웹페이지 오픈은 테이블의 모든 콘텐츠를 다운로드한 후 표시한 후에 이루어집니다. 브랜치 다운로드의 경우 콘텐츠의 일부를 먼저 표시할 수 있어 사용자의 대기 시간을 줄일 수 있습니다.

이용 목적 TBODY는 이것을 포함하도록 만드는 것입니다. 전체 테이블을 구문 분석한 후 코드를 함께 표시할 필요가 없습니다. 즉, 여러 행이 있는 경우 TBODY 행을 얻으면 한 행을 먼저 표시할 수 있습니다. BODY는 HTML의 텍스트 본문입니다. TABLE에는 여러 개의 TBODY가 있을 수 있습니다.

TBODY는 테이블의 내용이 클 때 더 실용적입니다. 브랜치 다운로드가 필요한 곳에 합계를 추가하세요.

예:

다음은 인용된 내용입니다. head1head2가 먼저 표시된 다음 foot1foot2

참고:

*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获取字符串长度

Come again 보세요:

이제 콜백 함수 작성:

<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=&#39;button&#39; ids=&#39;"+lie[0]+"&#39; class=&#39;sc&#39; value=&#39;删除&#39; />" +
          //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=&#39;{$ids}&#39;";
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=&#39;button&#39; ids=&#39;" + lie[0] + "&#39; class=&#39;sc&#39; value=&#39;删除&#39; />" +
            //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=&#39;{$ids}&#39;";
if($db ->Query($sql,0))
{
  echo "ok";
}
else{
  echo "no";
}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Ajax의 데이터 삭제 및 데이터 보기 작업 단계에 대한 자세한 설명

관련 기사