찾다
백엔드 개발PHP 문제클릭하여 PHP에서 더 많은 것을 로드하는 방법

PHP에서 추가 로드를 구현하는 방법: 먼저 새 index.php를 만들고 jQuery 라이브러리를 도입한 다음 새 "connect_sql.php"를 만들고 마지막으로 index.php에서 js 스크립트를 수정합니다.

클릭하여 PHP에서 더 많은 것을 로드하는 방법

이 기사의 운영 환경: Windows 7 시스템, PHP 버전 7.1, DELL G3 컴퓨터

PHP에서 더 많은 것을 로드하려면 클릭하는 방법은 무엇입니까?

jQuery+PHP를 사용하면 페이지를 새로 고치지 않고도 버튼을 클릭하여 더 많은 데이터를 로드할 수 있습니다! 첨부 파일: 사용 가능한 소스 코드 + 데모 ​​

첫 번째 효과:

클릭하여 PHP에서 더 많은 것을 로드하는 방법

처음 페이지를 열면 데이터의 일부만 표시됩니다. 추가 로드를 클릭하면 미리 정의된 로드 양이 로드되어 표시됩니다. ! 데이터베이스의 모든 데이터가 표시되면 모든 것이 로드되었다는 메시지가 표시됩니다!

New index.php

nbsp;html>


    <meta>
    <meta>
    <title>jQuery+php实现点击按钮加载更多</title>
    <style>
    *{margin: 0;padding:0;list-style: none;}
    a{color: #333;text-decoration: none;}
    .hidden{display:none;}
    .content{width: 300px;height:auto;margin:0 auto;overflow: hidden;text-align: left;background:#fff;padding:5px;}
    .content ul.list{overflow: hidden;}
    .content ul.list li{width: 300px;height:auto;margin:5px;float:left;overflow:hidden;text-align:center;}
    .content .more{overflow: hidden;padding:10px;text-align: center;}
    .content .more a{display: block;width: 120px;padding:8px 0;color:#fff;margin:0 auto;background:#333;text-align:center;border-radius:100px;font-size: 15px;}
    .content .more a:hover{text-decoration: none;background: red;color: #fff;}
    </style>


    <!--代码部分begin-->
    <p>
        </p><p>
            <?php             //获取数据
            require_once("connect_sql.php");
            ?>
        </p>
        
    数据加载中,请稍后...
        

点击加载更多


         <script></script>     <script> var _content = []; //临时存储li循环内容 var loadding = { _default:3, //默认个数 _loading:3, //每次点击按钮后加载的个数 init:function(){ var lis = $(".content .hidden li"); $(".content ul.list").html(""); for(var n=0;n<loadding._default;n++){ lis.eq(n).appendTo(".content ul.list"); } for(var i=loadding._default;i<lis.length;i++){ _content.push(lis.eq(i)); } $(".content .hidden").html(""); }, loadMore:function(){ var mLis = $(".content ul.list li").length; for(var i =0;i<loadding._loading;i++){ var target = _content.shift(); if(!target){ $(&#39;.content .more&#39;).html("<p style=&#39;color:#f00;&#39;>已加载全部..."); break; } $(".content ul.list").append(target); } } } loadding.init(); </script>     

위는 PHP 코드가 포함된 페이지의 레이아웃입니다. 이 부분의 코드는 실제로 데이터베이스를 쿼리하고 데이터베이스의 모든 데이터를 출력합니다. jQuery 라이브러리는 index.php에 도입되어야 합니다. 인터넷에서 jquery.min.js의 압축 버전을 다운로드할 수 있습니다. PHP 코드를 모두 별도의 connect_sql.php 파일에 작성한 후

<?php //获取数据
require_once("connect_sql.php");
?>

새로 create_sql.php

<?php //页面字符编码
header("Content-type:text/html;charset=utf-8");
//隐藏报错信息
error_reporting(E_ALL^E_NOTICE^E_WARNING);

//数据库地址
$host="localhost";
//数据库账号
$username="root";
//数据库密码
$password="root";
//数据库名
$db="loadMore";
//数据库表名
$tb="list";

//连接数据库
$con = mysql_connect($host,$username,$password);
if (!$con)
    {
       die(&#39;连接数据库失败,失败原因:&#39; . mysql_error());
    }
//设置数据库字符集  
mysql_query("SET NAMES UTF8");
//查询数据库
mysql_select_db($db, $con);
//获取数据
$result = mysql_query("SELECT * FROM $tb ORDER BY id ASC");
while($row = mysql_fetch_array($result)){
        echo "<li>".$row[title]."";
        echo "<br>";
    }
?>

connect_sql.php를 통해 index.php에 직접 도입했지만, connect_sql.php는 간단한 데이터베이스 쿼리 및 출력이지만, 출력 내용은

  • 내부에 설정되어야 합니다. 물론, 다른 태그에 포함하고 싶다면 index.php의 js 스크립트에서 직접 변경하세요.

    다음은 데이터베이스입니다.
    데이터베이스 계정, 비밀번호, 주소는 자신의 개발 구성에 따라 채워집니다. 제 코드에서는 데이터베이스 이름이 loadMore이고, 테이블 이름이 list입니다.
    다음은 스크린샷입니다. 구조:

    클릭하여 PHP에서 더 많은 것을 로드하는 방법

    좋아, 그게 다야
    정말 간단해!
    추천 학습: "PHP 비디오 튜토리얼"

  • 위 내용은 클릭하여 PHP에서 더 많은 것을 로드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

    성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    산과 기본 데이터베이스 : 차이 및 각각을 사용 해야하는시기.산과 기본 데이터베이스 : 차이 및 각각을 사용 해야하는시기.Mar 26, 2025 pm 04:19 PM

    이 기사는 산 및 기본 데이터베이스 모델을 비교하여 특성과 적절한 사용 사례를 자세히 설명합니다. 산은 금융 및 전자 상거래 애플리케이션에 적합한 데이터 무결성 및 일관성을 우선시하는 반면 Base는 가용성 및

    PHP 보안 파일 업로드 : 파일 관련 취약점 방지.PHP 보안 파일 업로드 : 파일 관련 취약점 방지.Mar 26, 2025 pm 04:18 PM

    이 기사는 코드 주입과 같은 취약점을 방지하기 위해 PHP 파일 업로드 보안에 대해 설명합니다. 파일 유형 유효성 검증, 보안 저장 및 오류 처리에 중점을 두어 응용 프로그램 보안을 향상시킵니다.

    PHP 입력 유효성 검증 : 모범 사례.PHP 입력 유효성 검증 : 모범 사례.Mar 26, 2025 pm 04:17 PM

    기사는 내장 함수 사용, 화이트리스트 접근 방식 및 서버 측 유효성 검사와 같은 기술에 중점을 둔 보안을 향상시키기 위해 PHP 입력 유효성 검증에 대한 모범 사례를 논의합니다.

    PHP API 요율 제한 : 구현 전략.PHP API 요율 제한 : 구현 전략.Mar 26, 2025 pm 04:16 PM

    이 기사는 토큰 버킷 및 누출 된 버킷과 같은 알고리즘을 포함하여 PHP에서 API 요율 제한을 구현하고 Symfony/Rate-Limiter와 같은 라이브러리 사용 전략에 대해 설명합니다. 또한 모니터링, 동적 조정 요율 제한 및 손도 다룹니다.

    PHP 비밀번호 해싱 : password_hash 및 password_verify.PHP 비밀번호 해싱 : password_hash 및 password_verify.Mar 26, 2025 pm 04:15 PM

    이 기사에서는 PHP에서 암호를 보호하기 위해 PHP에서 Password_hash 및 Password_Verify 사용의 이점에 대해 설명합니다. 주요 주장은 이러한 기능이 자동 소금 생성, 강한 해싱 알고리즘 및 Secur를 통해 암호 보호를 향상 시킨다는 것입니다.

    OWASP Top 10 PHP : 일반적인 취약점을 설명하고 완화하십시오.OWASP Top 10 PHP : 일반적인 취약점을 설명하고 완화하십시오.Mar 26, 2025 pm 04:13 PM

    이 기사는 PHP 및 완화 전략의 OWASP Top 10 취약점에 대해 설명합니다. 주요 문제에는 PHP 응용 프로그램을 모니터링하고 보호하기위한 권장 도구가 포함 된 주입, 인증 파손 및 XSS가 포함됩니다.

    PHP XSS 예방 : XSS로부터 보호하는 방법.PHP XSS 예방 : XSS로부터 보호하는 방법.Mar 26, 2025 pm 04:12 PM

    이 기사는 PHP의 XSS 공격을 방지하기위한 전략, 입력 소독, 출력 인코딩 및 보안 향상 라이브러리 및 프레임 워크 사용에 중점을 둔 전략에 대해 설명합니다.

    PHP 인터페이스 대 추상 클래스 : 각각을 사용할 때.PHP 인터페이스 대 추상 클래스 : 각각을 사용할 때.Mar 26, 2025 pm 04:11 PM

    이 기사는 각각의 사용시기에 중점을 둔 PHP의 인터페이스 및 추상 클래스 사용에 대해 설명합니다. 인터페이스는 관련없는 클래스 및 다중 상속에 적합한 구현없이 계약을 정의합니다. 초록 클래스는 일반적인 기능을 제공합니다

    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 옷 제거제

    Video Face Swap

    Video Face Swap

    완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

    뜨거운 도구

    ZendStudio 13.5.1 맥

    ZendStudio 13.5.1 맥

    강력한 PHP 통합 개발 환경

    SublimeText3 영어 버전

    SublimeText3 영어 버전

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

    메모장++7.3.1

    메모장++7.3.1

    사용하기 쉬운 무료 코드 편집기

    Eclipse용 SAP NetWeaver 서버 어댑터

    Eclipse용 SAP NetWeaver 서버 어댑터

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

    WebStorm Mac 버전

    WebStorm Mac 버전

    유용한 JavaScript 개발 도구