个人中心
gpt4 book ai didi

php - AJAX - codeigniter 中的 PHP 显示帖子并限制它们

转载 作者：可可西里 更新时间：2023-11-01 12:59:43 24 4
gpt4 key购买 nike

所以我是 ajax 的新手，而不是 php 的“专家”，我需要帮助。

我创建了一个在 document.ready 上显示来自数据库的帖子的 ajax 调用

$.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:

查看代码:

数据库中的所有内容都以这种格式转到#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>

最佳答案

有多种方法可以完成此操作，但这里是我使用 Codeigniter 进行设计的方法。这假设您已正确完成所有必需的配置设置，包括 application/config/config.php、application/config/database.php、application/config/routes.php 和可选的 application/config/autoload.php。

使用模型/ View / Controller 模式可以创建多个文件。首先， Controller 。这将是默认 Controller 并且是 Ko_web.php。在 routes.php 中，我们需要这个设置:$route['default_controller'] = 'ko_web'; 完成后你可以输入 http://example.com 并直接转到 ko_web Controller ，其中 index() 函数将接管。

/application/controllers/Ko_web.php

class Ko_web extends CI_Controller
{
    public function __construct()
    {
        parent::__construct();
        $this->load->model('postovi_model');
        $this->load->helper('url'); //could and maybe should be 'autoloaded'
    }

    public function index()
    {
        $data = array(); //empty but $data is set just in case

        //get the first 10 rows of users
        $rows = $this->postovi_model->get_next_10();
        if(isset($rows))
        {
            //We got rows, make the html from them
            //FYI, The array key 'users' becomes the variable $users in the view
            $data['users'] = $rows;
            //the view is returned as a string of html fully 
            //populated with rows of user's data
            $data['users'] = $this->load->view('user_rows_view', $data, TRUE);
        }

        //Using method chaining here to load multiple views cause it's cool and effcient
        $this->load
            //start the page with the reuseable header view file, passing page title too
            ->view('header_view', array('title' => "User Info")) 
            //Next, put the rows in the grid structure
            //note that if $data['users'] is not set the resulting view will have no user rows
            ->view('user_grid_view', $data)
            //add closing html tags, and in this case the javascript
            ->view('page_close_view', $data);
}

    public function load_more()
    {
        $offset = $this->input->post('offset');
        if($offset)
        {
            $new_rows = $this->postovi_model->get_next_10($offset);
            if(isset($new_rows))
            {
                $data['users'] = $new_rows;
                //this will return (echo) html to the ajax success function
                //CI takes care of making the correct response headers - sweet
                $this->load->view('user_rows_view', $data);
            }
            else
            {
                echo ""; //return an empty string
            }
        }
    }

}

index() 函数将加载(最多)前 10 行用户信息。

该模型非常简单，只有一个返回行数组的函数。

/application/models/Postovi_model.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Postovi_model extends CI_Model
{
    public function __construct()
    {
        parent::__construct();
        $this->load->database();
    }

    public function get_next_10($offset = 0)
    {
        $this->db->limit(10, $offset);
        $query = $this->db->get("postovi"); //same as "SELECT * FROM postovi LIMIT 10, $offset "
        //Got rows? If so return an array of row arrays, or return NULL if nothing retrieved
        return $query->num_rows() > 0 ? $query->result_array() : NULL;
    }

}

如果未找到任何行，模型将返回 NULL。 Controller 检查此条件并做出相应响应。

View 主要分为多个文件，因此可以轻松地重用标记。无论如何，每个页面的顶部都需要相同的信息。

application/views/header_view.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html>
    <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><?= isset($title) ? $title : "KO web"; ?></title>
    </head>
    <body>

请注意可以为页面传递标题，但如果未传递标题，我们会进行回退。

下一个 View 是网格结构。这里要注意两点。首先是 var $users。 Controller 从将在该 View 之后显示的另一个 View 创建此数据。 $users 的值是网格行的 html 字符串。如果设置了 $users，它将被回显到该 View 并最终回显到浏览器。

要注意的第二件事是我在网格底部放置了一个“加载更多...”按钮。它绑定(bind)到 javascript 并将启动 ajax 调用。确保 ajax 有效后，您可以实现滚动加载器。

/application/views/user_grid_view.php

<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" id='user-rows'>
            <?php
            if(isset($users))
            {
                echo $users;
            }
            ?>
        </div>
    </div>
    <button type="button" id="more_rows">Load More...</button>
</div>

接下来是构建网格项行显示的 View 页面

/application/views/user_rows_view.php

<?php
if(isset($users))
{
    foreach($users as $user)
    {
        //It's easier to drop in and out of the PHP interpreter than to concantenate strings.
        //There is no execution penalty for doing it.
        //Also, it's easer to read and easier to write.
        ?>
        <div id='<?= $user['ID']; ?>' class='grid-item <?= $user['shape']; ?>'>
            <div class='grid_content'><?= $user['img_holder']; ?></div>
            <div class='grid_title red'> <?= $user['naslovhj']; ?></div>
            <!--Is the following needed?-->
            <!--<div class='content_grid'></div>-->
        </div>
        <?php
    }
}

希望我的所有字段名称都正确并理解您想要的布局。

好的，最后一个 View 包含用于关闭网页的 javascript 和适当的 html 标记。

/application/views/page_close_view.php

<script>
    $(document).ready(function () {
    var baseURL = <?= base_url(); ?>;
    var row_count;

        $('#more_rows').on('click', function () {
            //what's the offset?
            row_count = $('.grid-item').length || 0;

            $.ajax({
                type: "POST",
                url: baseURL + "Ko_web/load_more",
                data: {offset: row_count},
                datatype: 'html',
                success: function (response) {
                    if (response === "") {
                        alert("No rows to show.");
                    } else {
                        $('#user-rows').append(response);
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log(jqXHR, textStatus, errorThrown);
                    //alert("your message here");
                    //$("#ea").html('There was an error updating the settings');
                }
            });
        });

    });
    /*
     * Note: I left out the remaineder of the javascript from your question 
     * because it did not seem to pertain to the answer you seek.
     */
</script></body></html>

脚本计算屏幕上由类“grid-item”标识的行数。我无法真正对此进行测试，但认为我做对了。这个数字被传递到 Controller ，它被用作数据库查询的偏移量。

因为 Controller 返回完全形成的 html，所以将它插入 DOM 中需要去的地方是微不足道的。我将 id='user-rows' 添加到围绕 content_grid 的 div，以便轻松找到正确的插入点。

这无疑会给您带来很多问题。这是 CodeIgniter Documentation您已经有了，但其他读者可能会感兴趣。

肯定会有拼写错误，也许还有一些语法错误。但是逻辑应该非常接近，并且结构在 CodeIgniter 上是正确的。享受吧!

关于php - AJAX - codeigniter 中的 PHP 显示帖子并限制它们，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39411159/

24 4 0
文章推荐： html - 拉伸(stretch) flexbox child 以填充列高度
文章推荐： javascript - 悬停时的 SVG 圆形动画描边
文章推荐： c# - 当从 native win32 应用程序调用 C# COM 程序集时，如何调试它？
文章推荐： html - CSS 导航栏悬停问题
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com