찾다
백엔드 개발PHP 튜토리얼PHP 기본 풀업 로딩 및 클릭하여 더 많은 구현 방법 로드(코드 예제)

이 기사에서 제공하는 내용은 PHP 네이티브 풀업 로딩 및 클릭 로딩의 구현 방법(코드 예제)에 대한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 당신에게 도움이 됩니다.

디자인 목적

웹사이트에 데이터가 많으면 쉽게 탐색할 수 있도록 페이지를 매겨야 합니다. , 그런 다음 클릭하여 페이지를 넘기고 직접 끌어내려 자동으로 데이터를 연속적으로 로드하는 전통을 포기하여 읽기 쉽습니다.

디자인 원칙

백엔드 인터페이스에 ajax를 통해 페이지 넘기기 요청을 시작하고, 페이지 번호를 보내고, 백엔드에서 수신합니다. 페이지 번호는 json 데이터를 반환하고 프런트 엔드 jquery는 json을 구문 분석하고 원본 데이터를 기반으로 연결합니다!

code

index.html

nbsp;html>


    <meta>
    <meta>
    <meta>
    <meta>
    <meta>
    <meta>
    <title>jquery+ajax上拉加载更多</title>
    <style>
        *{margin:0;padding: 0;}
        #text p{
            width: 80%;
            padding: 5px 5px;
            background: #eee;
            margin:5px auto;
        }
        #loadmore{
            width: 120px;
            background: #eee;
            height: 45px;
            border-radius: 100px;
            margin:20px auto;
            line-height: 45px;
            text-align: center;
            cursor: pointer;
        }

        #loading{
            text-align: center;
        }
    </style>


    <h3></h3>
    <div></div>
    <div>点击加载更多</div>



<!--引入jquery库-->
<script></script>
<script>
// 定义一个变量,等会用来控制多次触发
var i=0;
$(window).scroll(function(){
  //获取滚动时距离浏览器顶部的值
 var t=$(this).scrollTop();
  //获取当前窗口的高度
 var h=$(this).height();
  //获取按钮距离浏览器顶部的值
 var h1=$(&#39;#loadmore&#39;).offset().top;
  //用按钮的值-滚动条的值与窗口高度进行比较,如果小时,则表示按钮进入可视区,同时也表示滚动条即将到达底部
 if(h1-t<h){
    //防止快速下拉时多次触发
  if(i==0){
      //改变i的值
   i=1;
   //触发点击事件
   $(&#39;#loadmore&#39;).click();
  }
 }
});

// 加载初始数据
var p = 1;
$.ajax({
  type:"get",
  url:&#39;server.php?page=&#39; + p,
  data:{},
  dataType:"json",
  success:function(data){
      for (var a in data){
          $(&#39;#text&#39;).append("<p>"+data[a].resname+"");
          $("#loading").remove();
      }

   i=0;
      
  },
    error:function(data){

  },
    beforeSend:function(data){
        $(&#39;#loading&#39;).append("加载中");
    }
 });

// 加载更多
$(&#39;#loadmore&#39;).click(function(){
  p++;
 $.ajax({
  type:"get",
  url:&#39;server.php?page=&#39; + p,
  data:{},
  dataType:"json",
  success:function(data){
      for (var a in data){
          $(&#39;#text&#39;).append("<p>"+data[a].resname+"");
          $("#loading").remove();
      }
   i=0;
  },
    error:function(data){
   $(&#39;#text&#39;).append("<p>"+服务器错误+"");
  },
    beforeSend:function(data){
        $(&#39;#loading&#39;).append("加载中");
    }
 });
});
</script>

server.php

<?php header("Content-type:application/json");
header(&#39;Access-Control-Allow-Origin:*&#39;);
// 连接数据库
$con = mysql_connect("数据库地址","数据库账号","数据库密码");
if (!$con){die(&#39;Could not connect: &#39; . mysql_error());}

mysql_select_db("数据库名", $con);
mysql_query("SET NAMES UTF8");

// 每页显示条数
$pageLine = 5;

// 计算总记录数
$ZongPage = mysql_query("select count(*) from 表名");

// 计算总页数
$sum = mysql_fetch_row($ZongPage);
$pageCount = ceil($sum[0]/$pageLine);   
 
// 定义页码变量
@$tmp = $_GET[&#39;page&#39;];

 
// 计算分页起始值
$num = ($tmp - 1) * $pageLine;
 
// 查询语句
$result = mysql_query("SELECT 字段 FROM  表名 ORDER BY id DESC LIMIT " . $num . ",$pageLine");

//遍历输出
$results = array();
while ($row = mysql_fetch_assoc($result)) {
$results[] = $row;
}
echo json_encode($results);

//分页按钮
//上一页
$lastpage = $tmp-1;
//下一页
$nextpage = $tmp+1;

//防止翻过界
if (@$tmp > $pageCount) {
    echo "[{\"result\":\"没有了\"}]";
}

// 关闭数据库连接
mysql_close($con);
?>

위 내용은 PHP 기본 풀업 로딩 및 클릭하여 더 많은 구현 방법 로드(코드 예제)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
이 기사는 segmentfault에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
PHP와 Python : 다른 패러다임이 설명되었습니다PHP와 Python : 다른 패러다임이 설명되었습니다Apr 18, 2025 am 12:26 AM

PHP는 주로 절차 적 프로그래밍이지만 객체 지향 프로그래밍 (OOP)도 지원합니다. Python은 OOP, 기능 및 절차 프로그래밍을 포함한 다양한 패러다임을 지원합니다. PHP는 웹 개발에 적합하며 Python은 데이터 분석 및 기계 학습과 같은 다양한 응용 프로그램에 적합합니다.

PHP와 Python : 그들의 역사에 깊은 다이빙PHP와 Python : 그들의 역사에 깊은 다이빙Apr 18, 2025 am 12:25 AM

PHP는 1994 년에 시작되었으며 Rasmuslerdorf에 의해 개발되었습니다. 원래 웹 사이트 방문자를 추적하는 데 사용되었으며 점차 서버 측 스크립팅 언어로 진화했으며 웹 개발에 널리 사용되었습니다. Python은 1980 년대 후반 Guidovan Rossum에 의해 개발되었으며 1991 년에 처음 출시되었습니다. 코드 가독성과 단순성을 강조하며 과학 컴퓨팅, 데이터 분석 및 기타 분야에 적합합니다.

PHP와 Python 중에서 선택 : 가이드PHP와 Python 중에서 선택 : 가이드Apr 18, 2025 am 12:24 AM

PHP는 웹 개발 및 빠른 프로토 타이핑에 적합하며 Python은 데이터 과학 및 기계 학습에 적합합니다. 1.PHP는 간단한 구문과 함께 동적 웹 개발에 사용되며 빠른 개발에 적합합니다. 2. Python은 간결한 구문을 가지고 있으며 여러 분야에 적합하며 강력한 라이브러리 생태계가 있습니다.

PHP 및 프레임 워크 : 언어 현대화PHP 및 프레임 워크 : 언어 현대화Apr 18, 2025 am 12:14 AM

PHP는 현대화 프로세스에서 많은 웹 사이트 및 응용 프로그램을 지원하고 프레임 워크를 통해 개발 요구에 적응하기 때문에 여전히 중요합니다. 1.PHP7은 성능을 향상시키고 새로운 기능을 소개합니다. 2. Laravel, Symfony 및 Codeigniter와 같은 현대 프레임 워크는 개발을 단순화하고 코드 품질을 향상시킵니다. 3. 성능 최적화 및 모범 사례는 응용 프로그램 효율성을 더욱 향상시킵니다.

PHP의 영향 : 웹 개발 및 그 이상PHP의 영향 : 웹 개발 및 그 이상Apr 18, 2025 am 12:10 AM

phphassignificallyimpactedwebdevelopmentandextendsbeyondit

스칼라 유형, 반환 유형, 노조 유형 및 무효 유형을 포함한 PHP 유형의 힌트 작업은 어떻게 작동합니까?스칼라 유형, 반환 유형, 노조 유형 및 무효 유형을 포함한 PHP 유형의 힌트 작업은 어떻게 작동합니까?Apr 17, 2025 am 12:25 AM

PHP 유형은 코드 품질과 가독성을 향상시키기위한 프롬프트입니다. 1) 스칼라 유형 팁 : PHP7.0이므로 int, float 등과 같은 기능 매개 변수에 기본 데이터 유형을 지정할 수 있습니다. 2) 반환 유형 프롬프트 : 기능 반환 값 유형의 일관성을 확인하십시오. 3) Union 유형 프롬프트 : PHP8.0이므로 기능 매개 변수 또는 반환 값에 여러 유형을 지정할 수 있습니다. 4) Nullable 유형 프롬프트 : NULL 값을 포함하고 널 값을 반환 할 수있는 기능을 포함 할 수 있습니다.

PHP는 객체 클로닝 (클론 키워드) 및 __clone 마법 방법을 어떻게 처리합니까?PHP는 객체 클로닝 (클론 키워드) 및 __clone 마법 방법을 어떻게 처리합니까?Apr 17, 2025 am 12:24 AM

PHP에서는 클론 키워드를 사용하여 객체 사본을 만들고 \ _ \ _ Clone Magic 메소드를 통해 클로닝 동작을 사용자 정의하십시오. 1. 복제 키워드를 사용하여 얕은 사본을 만들어 객체의 속성을 복제하지만 객체의 속성은 아닙니다. 2. \ _ \ _ 클론 방법은 얕은 복사 문제를 피하기 위해 중첩 된 물체를 깊이 복사 할 수 있습니다. 3. 복제의 순환 참조 및 성능 문제를 피하고 클로닝 작업을 최적화하여 효율성을 향상시키기 위해주의를 기울이십시오.

PHP vs. Python : 사용 사례 및 응용 프로그램PHP vs. Python : 사용 사례 및 응용 프로그램Apr 17, 2025 am 12:23 AM

PHP는 웹 개발 및 컨텐츠 관리 시스템에 적합하며 Python은 데이터 과학, 기계 학습 및 자동화 스크립트에 적합합니다. 1.PHP는 빠르고 확장 가능한 웹 사이트 및 응용 프로그램을 구축하는 데 잘 작동하며 WordPress와 같은 CMS에서 일반적으로 사용됩니다. 2. Python은 Numpy 및 Tensorflow와 같은 풍부한 라이브러리를 통해 데이터 과학 및 기계 학습 분야에서 뛰어난 공연을했습니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.