文章/答案/技术大牛

发布

社区首页 >问答首页 >codeigniter中的AJAX - PHP展示帖子并对其进行限制

问codeigniter中的AJAX - PHP展示帖子并对其进行限制
EN

Stack Overflow用户

提问于 2016-09-09 20:02:55

回答 2查看 276关注 0票数 7

所以我是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>

php

jquery

ajax

codeigniter

回答 2

Stack Overflow用户

发布于 2016-09-10 03:53:33

有多种方法可以做到这一点，但这里是我如何使用Codeigniter设计的。这里假设您已经正确地完成了所有必需的配置设置，包括application/config/config.php、application/config/database.php、application/config/routes.php和可选的application/config/autoload.php中的配置。

使用Model/View/Controller模式，需要创建多个文件。首先，控制器。这将是默认控制器，并且是Ko_web.php。在routes.php中，我们需要这样的设置：$route['default_controller'] = 'ko_web';完成后，您可以输入http://example.com并直接转到ko_web控制器，在那里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。控制器检查此条件并做出相应的响应。

视图大多被分解成多个文件，因此标记可以很容易地重用。每个页面的顶部无论如何都需要相同的信息。

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>

注意，可以为页面传递一个标题，但是如果没有传递一个标题，我们就有一个后备。

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

第二件要注意的事情是，我放了一个"Load More...“按钮显示在网格的底部。它与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>

下一步是构建要显示的网格项行的视图页面

/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
    }
}

希望我把所有的字段名都写对了，并且理解了你想要的布局。

好的，最后一个视图，它有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“类标识的屏幕上的行数。我不能真正测试这一点，但我认为我做对了。这个数字被传递给控制器，在那里它被用作数据库查询的偏移量。

因为控制器返回完全格式的html，所以很容易将其插入到DOM中它需要去的地方。为了便于找到正确的插入点，我在content_grid周围的div中添加了id='user-rows'。

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

肯定会有打字错误，可能还会有一些语法错误。但逻辑应该非常接近，结构应该是CodeIgniter上的点。享受吧！

票数 1

Stack Overflow用户

发布于 2016-09-09 22:47:21

以邮寄方式发送页码

    $.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();

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39411159

复制

相似问题

问codeigniter中的AJAX - PHP展示帖子并对其进行限制
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问codeigniter中的AJAX - PHP展示帖子并对其进行限制EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问codeigniter中的AJAX - PHP展示帖子并对其进行限制
EN