Ajax 는 페이지 인 스 턴 스 코드 를 새로 고침 하지 않 습 니 다.

오늘 우 리 는 ajax 로 페이지 를 만 들 것 이다.
Ajax 페이지 구현:
가능 하 다 면 조회 조건 을 더 하 세 요.
시계 한 장 을 찾 아 페이지 를 나눈다.
페이지 별로 page 류 를 사용 하지 않 습 니 다페이지 새로 고침 필요 없 음

Ajax 로드 데이터


<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <script src="jquery-1.11.2.min.js"></script>
<style type="text/css">
.dangqian{ background-color:#69F}
</style>
</head>
<body>
<div>
  <input type="text" id="key" />
  <input type="button" value="  " id="chaxun" />
</div>
<table width="50%" border="1" bordercolordark="0" bordercolorlight="0">
  <tr>
    <td>  </td>
    <td>  </td>
    <td>    </td>
  </tr>
  <tbody id="neirong"><!--    -->
  </tbody>
</table>
<div id="fenyexinxi">
</div>
</body>
<script type="text/javascript">
  var page = 1;//    ，       
  Load();//    
  Loadfenyexinxi();//      
  //  
  $("#chaxun").click(function(){
    page = 1;
    Load();//    
    Loadfenyexinxi();//      
  })
  function Load()
  {
    var key = $("#key").val();//    。       
    $.ajax({
      url:"chuli.php",
      data: {
      page: page,
      key: key
    },// 2       2          
      type:"POST",
      dataType:"JSON",
      success: function(data){//    
          var str = "";//           
          for(var k in data)//  K         
          {//      
            str +="<tr><td>"+data[k].AreaCode+"</td><td>"+data[k].AreaName+"</td><td>"+data[k].ParentAreaCode+"</td></tr>";//      ，  、      
          }
          $("#neirong").html(str);
      }
    });
  }
function Loadfenyexinxi()//    
{
  var str = "";
  var minys = 1;//    
  var maxys = 1;//    
  var key = $("#key").val();//        zys   
  $.ajax({
    async:false,
    type:"POST",
    url:"fenye.php",
    data:{key:key},
    dataType:"TEXT",
    success:function(d){
        maxys = d;
    }
  });
  str += "<span style='text-decoration:underline; cursor:pointer'>  ："+maxys+" </span> ";
  str += "<span id='prev' style='text-decoration:underline; cursor:pointer'>   </span>";
  for(var i=page-2;i<page+3;i++)
  {
    if(i>=minys && i<=maxys)
    {
      if(i==page)
      {
        str += "<span style='text-decoration:underline; cursor:pointer' class='dangqian' bs='"+i+"'>"+i+"</span> ";
      }
      else
      {
        str += "<span style='text-decoration:underline; cursor:pointer' class='list' bs='"+i+"'>"+i+"</span> ";
      }
    }
  }
  str += "<span style='text-decoration:underline; cursor:pointer' id='next'>   </span>";
  $("#fenyexinxi").html(str);
  $("#prev").click(function(){
      page = page-1;
      if(page<1)
      {
        page=1;
      }
      Load();
      Loadfenyexinxi();
    })
  $("#next").click(function(){
      page = page+1;
      if(page>maxys)
      {
        page=maxys;
      }
      Load();
      Loadfenyexinxi();
    })
  $(".list").click(function(){
      page = parseInt($(this).attr("bs"));
      Load();
      Loadfenyexinxi();
    })
}
</script>
</html>

위 는 이 페이지:test.php


<?php
include("DBDA.class.php");
$db = new DBDA();
//      2     
$page = $_POST["page"];//   
$key = $_POST["key"];//  ，   
$num = 20;//  ，        ，
$tiaoshu = ($page-1)*$num;//$tiaoshu     ($page-1)*$num  $num 20 
// $SQL  
$sql = "select * from chinastates where areaname like '%{$key}%' limit {$tiaoshu},{$num}";//      like '%{$tiaojian}%'。
echo $db->JSONQuery($sql);

위 는 처리 페이지:chuli.php:


<?php
include("DBDA.class.php");
$db = new DBDA();
$key = $_POST["key"];
$num = 20;
$sql = "select count(*) from chinastates where areaname like '%{$key}%'";
$zts = $db->StrQuery($sql);
echo ceil($zts/$num);

위 는 페이지:fenye.php
다음은 우리 의 디 스 플레이 효과 입 니 다.

다음 페이지 를 클릭 하면 아래 에 5 페이지 가 표시 되 고 현재 페이지 좌우 에 두 페이지 가 표시 되 며 각 페이지 의 표시 정보 항목 수 는 스스로 조정 할 수 있 습 니 다.
위의 텍스트 상자 에 키 워드 를 입력 하면 관련 정 보 를 표시 합 니 다.이것 이 바로 우리 가 ajax 로 만 든 페이지 입 니 다.
위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 Ajax 가 페이지 인 스 턴 스 코드 를 갱신 하지 않 고 여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 저 에 게 메 시 지 를 남 겨 주세요.소 편 은 제때에 여러분 에 게 답 할 것 입 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Javascript Ajax에 대한 간단한 연습

저는 약 4년 동안 프로그래밍 개인 튜터로 일한 경험이 있습니다. 약 5년 전에 " "이라는 제목의 페르시아어로 내 웹사이트에 블로그 게시물을 올렸고 사람들이 저에게 전화하기 시작했습니다. 나는 항상 사람들을 가르치...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Ajax 는 페이지 인 스 턴 스 코드 를 새로 고침 하지 않 습 니 다.

좋은 웹페이지 즐겨찾기