FTW*_*ngs 7 php ajax jquery codeigniter
所以我是新的ajax而不是那么"亲"在php,我需要帮助.
我创建了一个ajax调用,在document.ready上显示来自DB的帖子
$.ajax({
type:"POST",
url:"testphp.php",
datatype: 'json',
success:function myFunction(response) {
var arr = JSON.parse(response);
var i;
var out = " ";
for(i = 0; i < arr.length; i++) {
out +=
"<div id='"+arr[i].ID+"' class='grid-item "+arr[i].shape+"'>
<div class='grid_content'>"+arr[i].img_holder+"</div><div class='grid_title red'>"+arr[i].naslovhj+"</div>
<div class='content_grid'></div>
</div>"
}
out += " ";
document.getElementById("grids").innerHTML = out;
console.log("uspjelo");
},
error:function(){
$("#ea").html('There was an error updating the settings');
}
});
testphp.php中的内容是:
$conn = new mysqli($servername, $username, $password, $dbname);
$myArray = array();
if ($result = $conn->query("SELECT * FROM postovi")) {
$tempArray = array();
while($row = $result->fetch_object()) {
$tempArray = $row;
array_push($myArray, $tempArray);
}
echo json_encode($myArray);
}
$result->close();
我如何制作它以便每页显示10个帖子,并且新页面是这个页面的底部(当我滚动到页面底部时,它会附加10个帖子)
我尝试了几个无限的卷轴,但他们没有按照我想象的那样工作.
编辑:如果这可以通过中间的ajax完成,我会想要一些PHP模型将是很酷的
编辑2:
查看代码:
来自DB的所有内容都将转换为此格式的#GRIDS元素
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<!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" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-2.2.2.js" integrity="sha256-4/zUCqiq0kqxhZIyp4G0Gk+AOtCJsY1TA00k5ClsZYE=" crossorigin="anonymous"></script>
<script src="https://npmcdn.com/packery@2.0/dist/packery.pkgd.js"></script>
<script src="src/jquery.keep-ratio.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
<title>KO web</title>
</head>
<body>
<div class="grid" id="grids">
<div class="grid-item grid-normal">
<div class="grid_content"><img src=""></div>
<div class="grid_title red">
title
</div>
<div class="content_grid">
</div>
</div>
</body>
<script>
$( document ).ready(function() {
//ajax tes
$.ajax({
type:"POST",
url:"testphp.php",
datatype: 'json',
success:function myFunction(response) {
var arr = JSON.parse(response);
var i;
var out = " ";
for(i = 0; i < arr.length; i++) {
out +=
"<div id='"+arr[i].ID+"' class='grid-item "+arr[i].shape+"'><div class='grid_content'>"+arr[i].img_holder+"</div><div class='grid_title red'>"+arr[i].naslovhj+"</div><div class='content_grid'></div></div>"
}
out += " ";
document.getElementById("grids").innerHTML = out;
console.log("uspjelo");
}
,
error:function(){
$("#ea").html('There was an error updating the settings');
}
});
//end off ajax test
setTimeout(function(){
$('.grid_title').each(function() {
var mrs = $(this).innerHeight();
$(this).css("margin-bottom", "-" + mrs + "px");
});}, 100);
$( document ).ajaxComplete(function() {
$('.grid').packery({
// options
itemSelector: '.grid-item',
gutter: 0
});
var clickDisabled = false;
counter_p = 0;
$(".grid-item").click(function(){
counter_p ++;
if(counter_p == 1){
$(this).attr("id", "active-grid-item-momentum");
$(this).children(".content_grid").attr("id", "active_cont");
$(this).children(".grid_title").css("display","none");
var width1 = document.getElementById('active-grid-item-momentum').offsetWidth;
var height0 = document.getElementById('active-grid-item-momentum').offsetHeight;
$(this).children(".grid_content").css("height", height0 + "px");
$(this).children(".grid_content").css("width", width1 + "px");
$(this).append( "<div id='close_all'>Test</div>" );
$(this).css("cursor", "default")
document.getElementById('active-grid-item-momentum').style.pointerEvents = 'none';
document.getElementById('active_cont').style.pointerEvents = 'auto';
$(this).children(".grid_content").children("img").css("opacity", "0");
document.getElementById("active_cont").innerHTML="<h1>Sea world</h1><img src='../img/Aqua-Maris-Sea-World-game.png' style='float:left; margin-top:10px; margin-bottom:10px; margin-right:10px;' /><a href='http://www.google.com'>djlkjfkld</a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nisi sapien, ut scelerisque diam malesuada ut. Donec eget nibh vitae erat vehicula ullamcorper. In vitae ultricies erat. Nam at dignissim arcu. Nunc nec metus ac sem porttitor pulvinar sed vel ipsum. Phasellus nec velit sapien. Quisque vel pretium purus. In at massa nibh. Aliquam condimentum mauris nunc, ac consequat dolor scelerisque sed. Nullam sed mi vitae massa accumsan tincidunt. Curabitur in sem blandit eros interdum molestie. Sed ultricies sem ac ex consequat mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer sollicitudin nulla ac velit imperdiet gravida.Maecenas sed dictum leo. Mauris ac diam nec ex lobortis blandit in vitae sapien. Etiam a sodales augue, sollicitudin mattis ligula. In elementum ligula nunc, et porta purus tincidunt eu. Etiam bibendum interdum lectus. Sed convallis ornare placerat. Nullam sodales eget dui quis sodales. Donec consequat nisl eget sapien cursus semper. Pellentesque finibus facilisis nulla, sit amet pellentesque justo tristique et. Cras sodales nisl sed est euismod fringilla.Duis lacus ex, volutpat sed maximus et, dapibus in tortor. Vestibulum tristique lectus congue quam suscipit, quis varius leo consectetur. Proin enim eros, pretium sed purus eu, consectetur pulvinar velit. Pellentesque enim nunc, iaculis ut lacus ut, posuere dapibus eros. Integer ac sem molestie sem iaculis cursus. Vivamus quis eros in est molestie luctus eget quis massa. Curabitur ut metus sodales, eleifend dolor sit amet, dapibus magna. Phasellus a est libero. Nunc sed dui at felis varius semper. Ut neque metus, volutpat sed tortor a, venenatis consectetur ex.Ut ullamcorper placerat mattis. Aenean finibus mauris a dui volutpat, at vulputate justo porta. Proin scelerisque eleifend quam eget congue. Nunc laoreet cursus massa sit amet condimentum. Sed sit amet semper augue, et ultricies arcu. Nullam iaculis euismod est interdum tristique. Praesent magna velit, volutpat a varius eget, cursus vel ex. Morbi molestie leo quis accumsan fringilla. Donec in facilisis nisi, sit amet dictum ligula. Aenean vel sodales dolor, nec elementum mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus at tristique dolor. Sed blandit venenatis turpis, sed varius nisi euismod a. Integer quis nisl lorem.Sed lorem velit, varius non lacus vitae, tincidunt porttitor nibh. Aliquam facilisis vulputate ex, eget fermentum sapien congue eu. Nunc ac scelerisque ipsum, vel iaculis felis. Pellentesque iaculis, ligula at ullamcorper ullamcorper, erat justo egestas magna, ut egestas quam metus vel enim. Mauris elementum ut ex eget venenatis. Quisque quis porttitor nibh. Quisque fermentum mauris in libero commodo, vel viverra nisl faucibus. Curabitur posuere metus luctus facilisis pellentesque. Integer rutrum augue ac odio tristique eleifend. Integer semper ante vitae dapibus varius. Quisque interdum turpis vel enim tempor sollicitudin quis maximus est. Mauris efficitur dui ac velit mattis ultrices. Curabitur elementum dictum felis, sed eleifend ex elementum sed.! massa accumsan tincidunt. Curabitur in sem blandit eros interdum molestie. Sed ultricies sem ac ex consequat mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer sollicitudin nulla ac velit imperdiet gravida.Maecenas sed dictum leo. Mauris ac diam nec ex lobortis blandit in vitae sapien. Etiam a sodales augue, sollicitudin mattis ligula. In elementum ligula nunc, et porta purus tincidunt eu. Etiam bibendum interdum lectus. Sed convallis ornare placerat. Nullam sodales eget dui quis sodales. Donec consequat nisl eget sapien cursus semper. Pellentesque finibus facilisis nulla, sit amet pellentesque justo tristique et. Cras sodales nisl sed est euismod fringilla.Duis lacus ex, volutpat sed maximus et, dapibus in tortor. Vestibulum tristique lectus congue quam suscipit, quis varius leo consectetur. Proin enim eros, pretium sed purus eu, consectetur pulvinar velit. Pellentesque enim nunc, iaculis ut lacus ut, posuere dapibus eros. Integer ac sem molestie sem iaculis cursus. Vivamus quis eros in est molestie luctus eget quis massa. Curabitur ut metus sodales, eleifend dolor sit amet, dapibus magna. Phasellus a est libero. Nunc sed dui at felis varius semper. Ut neque metus, volutpat sed tortor a, venenatis consectetur ex.Ut ullamcorper placerat mattis. Aenean finibus mauris a dui volutpat, at vulputate justo porta. Proin scelerisque eleifend quam eget congue. Nunc laoreet cursus massa sit amet condimentum. Sed sit amet semper augue, et ultricies arcu. Nullam iaculis euismod est interdum tristique. Praesent magna velit, volutpat a varius eget, cursus vel ex. Morbi molestie leo quis accumsan fringilla. Donec in facilisis nisi, sit amet dictum ligula. Aenean vel sodales dolor, nec elementum mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus at tristique dolor. Sed blandit venenatis turpis, sed varius nisi euismod a. Integer quis nisl lorem.Sed lorem velit, varius non lacus vitae, tincidunt porttitor nibh. Aliquam facilisis vulputate ex, eget fermentum sapien congue eu. Nunc ac scelerisque ipsum, vel iaculis felis. Pellentesque iaculis, ligula at ullamcorper ullamcorper, erat justo egestas magna, ut egestas quam metus vel enim. Mauris elementum ut ex eget venenatis. Quisque quis porttitor nibh. Quisque fermentum mauris in libero commodo, vel viverra nisl faucibus. Curabitur posuere metus luctus facilisis pellentesque. Integer rutrum augue ac odio tristique eleifend. Integer semper ante vitae dapibus varius. Quisque interdum turpis vel enim tempor sollicitudin quis maximus est. Mauris efficitur dui ac velit mattis ultrices. Curabitur elementum dictum felis, sed eleifend ex elementum sed.!";
$(this).css("width", "calc(100% - 10px)");
</script>
通过邮寄发送页码
$.ajax({
type:"POST",
url:"testphp.php",
datatype: 'json',
data : {page: 1/* show page*/}
success:function myFunction(response) {
var arr = JSON.parse(response);
var i;
var out = " ";
for(i = 0; i < arr.length; i++) {
out +=
"<div id='"+arr[i].ID+"' class='grid-item "+arr[i].shape+"'>
<div class='grid_content'>"+arr[i].img_holder+"</div><div class='grid_title red'>"+arr[i].naslovhj+"</div>
<div class='content_grid'></div>
</div>"
}
out += " ";
document.getElementById("grids").innerHTML = out;
console.log("uspjelo");
},
error:function(){
$("#ea").html('There was an error updating the settings');
}
});
计算偏移量，在结果中留下一个区间
// file testphp.php
$page = $_POST['page'];
$limit = 20;
$offset = ($page - 1) * $limit; //calculating next offset
$conn = new mysqli($servername, $username, $password, $dbname);
$myArray = array();
if ($result = $conn->query("SELECT * FROM postovi LIMIT ".$limit." OFFSET ".$offset)) {
$tempArray = array();
while($row = $result->fetch_object()) {
$tempArray = $row;
array_push($myArray, $tempArray);
}
echo json_encode($myArray);
}
$result->close();
| 归档时间： |
|
| 查看次数： |
225 次 |
| 最近记录： |