zoukankan      html  css  js  c++  java
  • php ajax 下拉加载数据

    视图

    <html>

    <head>
    <title>健康知识</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
    <div>
    <ul class="et-list p-list">
    <?php foreach($result as $k => $res): ?>
    <li><?php echo $result[$k]['hlh_url']; ?></li><br/>
    <li><a href="http://xhdoctor.ci.com/index.php/xh_client_h5/healthinfoc?id=<?php echo $result[$k]['id']; ?>"><?php echo $result[$k]['title']; ?></a></li><br />
    <?php endforeach; ?>
    </ul>
    </div>
    <div id="loadingbox"><img id="loading" style="display:none;height:20px;" src="http://img.lanrentuku.com/img/allimg/1212/5-121204193R0.gif"/></div> 《加载动态图。。。。动态图是 div标签有一个gif格式的小图标》
    <script>
    $(function(){
    function loadMeinv() {
    var url = window.location.href;
    $.get(url, {p: count, response: 'ajax'}, function (json) {
    console.log(json);
    $('#loading').fadeOut(3000);
    setTimeout( function(){
    if (json.length == 0) {
    onOff = false;
    return false;
    } else {
    count++;
    }
    $.each(json, function (keyList, ovalue) {
    var html = '<li>'+ovalue.hlh_url+'</li><br/>'
    +'<li><a href="http://xhdoctor.ci.com/index.php/xh_client_h5/healthinfoc?id='+ovalue.id+'">'+ovalue.title+'</li><br />';
    $minUl = getMinUl();
    $minUl.append(html);
    });
    },1000);
    }, 'json');
    }

    var onOff = true;
    var count = 2;
    // loadMeinv();
    $(window).on("scroll", function () {
    $minUl = getMinUl();
    if (($(window).scrollTop() >= $minUl.height() - $(window).height()) && onOff && $('#loading').css('display') == "none") {
    $('#loading').show();

    loadMeinv();
    }
    });
    function getMinUl() {
    var $arrUl = $(".p-list");
    var $minUl = $arrUl.eq(0);
    $arrUl.each(function (index, elem) {
    if ($(elem).height() < $minUl.height()) {
    $minUl = $(elem);
    }
    });
    return $minUl;
    }
    });

    </script>
    </body>
    </html>

    服务器的代码示例

    控制器

    /**
    * 健康知识
    */
    public function healthinfo(){
    $data = array();
    $page = $this->input->get('p') ? $this->input->get('p'):1;
    $response = $this->input->get('response');
    $type = "0";
    $this->load->model('Xh_client_h5_model');
    $data['result'] = $this->Xh_client_h5_model->get_healthinfo($type,$page);
    if($response == 'ajax'){
    echo json_encode($data['result']);die();
    }
    $this->load->view('healthinfo',$data);
    }

    模型

    /**
    * 获取健康知识的信息
    * @param string $type 健康知识 0
    * @param string $page
    * @return 健康信息的列表
    */
    public function get_healthinfo($type,$page){
    $healthinfo = array();
    $limit = 7;
    $offset = ($page - 1) * $limit;
    $this->db->where('type',$type);
    $this->db->limit($limit, $offset);
    $query = $this->db->get('hlh_message');
    $row = $query->result_array();
    foreach($row as $k=>$v){
    $healthinfo[$k]['id'] = $v['id'];
    $healthinfo[$k]['title'] = $v['title'];
    $healthinfo[$k]['hlh_url'] = $v['hlh_url'];
    $healthinfo[$k]['jump_url'] = $v['jump_url'];
    }
    return $healthinfo;
    }

  • 相关阅读:
    MARGIN-BEFORE MARGIN-AFTER MARGIN-START MARGIN-END
    原生js写简单轮播图方式1-从左向右滑动
    标准模式与怪异模式
    XMLHTTPRequest
    【Github教程】史上最全github使用方法:github入门到精通
    月亮
    星星dom
    css中链接的4个状态 link、visited 、hover、active 顺序与设置
    CSS animation-timing-function 属性中的 steps() 与 step-start,step-end
    jQuery.Deferred对象
  • 原文地址:https://www.cnblogs.com/lijiageng/p/5703645.html
Copyright © 2011-2022 走看看