php native pull-up loading, click load more (jQuery,ajax,mysql)

Keywords: Javascript Database JSON JQuery PHP

Design purpose

When there is a lot of data in a website, it needs to be paged and browsed easily. In order to turn pages conveniently, we abandon the traditional Click to turn pages, pull down directly, and load data automatically constantly, so that we can read conveniently.

design principle

Through ajax to the back-end interface to initiate page turning request, send page number, back-end receive page number, return json data, front-end jquery parsing json and splicing on the basis of the original data!

Code

index.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>jquery+ajax Pull up to load more</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>
</head>
<body>
    <h3 id="loading"></h3>
    <div id="text"></div>
    <div id="loadmore">Click to load more</div>
</body>
</html>

<!--Introduce jquery library-->
<script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
<script>
// Define a variable that will be used to control multiple triggers
var i=0;
$(window).scroll(function(){
  //Gets the value from the top of the browser when scrolling
　var t=$(this).scrollTop();
  //Get the height of the current window
　var h=$(this).height();
  //Get the value of the button from the top of the browser
　var h1=$('#loadmore').offset().top;
  //Compare the value of the button - the value of the scroll bar with the height of the window. If the hour is small, it means that the button enters the visible area, and it also means that the scroll bar is about to reach the bottom
　if(h1-t<h){
    //Prevent multiple triggers when pulling down quickly
　　if(i==0){
      //Change the value of i
　　　i=1;
　　　//Trigger click event
　　　$('#loadmore').click();
　　}
　}
});

// Load initial data
var p = 1;
$.ajax({
　　type:"get",
　　url:'server.php?page=' + p,
　　data:{},
　　dataType:"json",
　　success:function(data){
      for (var a in data){
          $('#text').append("<p>"+data[a].resname+"</p>");
          $("#loading").remove();
      }

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

　　},
    beforeSend:function(data){
        $('#loading').append("loading");
    }
　});

// Load more
$('#loadmore').click(function(){
  p++;
　$.ajax({
　　type:"get",
　　url:'server.php?page=' + p,
　　data:{},
　　dataType:"json",
　　success:function(data){
      for (var a in data){
          $('#text').append("<p>"+data[a].resname+"</p>");
          $("#loading").remove();
      }
　　　i=0;
　　},
    error:function(data){
　　　$('#Text '). Append ("< p >" + server error + "< / P >");
　　},
    beforeSend:function(data){
        $('#loading').append("loading");
    }
　});
});
</script>

server.php

<?php
header("Content-type:application/json");
header('Access-Control-Allow-Origin:*');
// Connect to database
$con = mysql_connect("Database address","Database account","Database password");
if (!$con){die('Could not connect: ' . mysql_error());}

mysql_select_db("Database name", $con);
mysql_query("SET NAMES UTF8");

// Number of items per page
$pageLine = 5;

// Calculate total records
$ZongPage = mysql_query("select count(*) from Table name");

// Calculate total pages
$sum = mysql_fetch_row($ZongPage);
$pageCount = ceil($sum[0]/$pageLine);   
 
// Define page number variables
@$tmp = $_GET['page'];

 
// Calculate page start value
$num = ($tmp - 1) * $pageLine;
 
// Query statement
$result = mysql_query("SELECT field FROM  Table name ORDER BY id DESC LIMIT " . $num . ",$pageLine");

//Ergodic output
$results = array();
while ($row = mysql_fetch_assoc($result)) {
$results[] = $row;
}
echo json_encode($results);

//Paging button
//Previous page
$lastpage = $tmp-1;
//next page
$nextpage = $tmp+1;

//Prevent crossing
if (@$tmp > $pageCount) {
    echo "[{\"result\":\"Period\"}]";
}

// Close database connection
mysql_close($con);
?>

By: TANKING
Wechat: likeyunba520
Website:likeyunba.com

Posted by mr_griff on Mon, 02 Dec 2019 08:04:27 -0800

Programmer Group

php native pull-up loading, click load more (jQuery,ajax,mysql)

Design purpose

design principle

Code

Hot Keywords