jquery ajax分页写法

jquery ajax分页写法
我用的是laypage插件

前端代码

        function demo(curr) {
            $.getJSON('/home/index/getinfo', {
                page: curr || 1 //向服务端传的参数,此处只是演示
            }, function (res) {
                var html = '';
                var list = res.data.list;
                $.each(list, function (k, v) {
                    html += '<div';
                    if(k%2==0){
                        html += ' style="margin-left:0px;"';
                    }
                    html += ' class="perinfocontent" onclick="window.location.href=\'content.html?id='+v['id']+'\'">';
                    html += '<img src="'+v['fengmiantu']+'" alt="" class="pic">';
                    html += '<div class="infos">';
                    html += '<div class="title">'+v['title']+'</div>';
                    html += '<div class="tiyao">'+v['content']+'</div>';
                    html += '<div class="publishtime">2017 / 1 / 23</div>';
                    html += '</div>';
                    html += '</div>';
                });

                $('.infocontent').html(html);

                //显示分页
                laypage({
                    cont: $('#page3'), //容器。值支持id名、原生dom对象,jquery对象,
                    pages: res.data.pagecount, //总页数
                    skip: true, //是否开启跳页
                    skin: 'molv',
                    curr: curr || 1, //当前页
                    jump: function (obj, first) { //触发分页后的回调
                        if (!first) { //点击跳页触发函数自身,并传递当前页:obj.curr

                        demo(obj.curr);
                        }
                    }
                });

            });
        };
//运行
        demo();

PHP代码

    public function getinfo(){
        $page = intval($_GET['page']);
     
        if(empty($page)){
            $page=1;
        }
        $startpos=$page-1;
        //返回每页的数据
        $percount = 8;
        $VModel = new HuanShanVoteModel();
        $sql = 'select * from wz_content order by id desc limit '.$startpos*$percount.',' . $percount;

        $result = $VModel->query($sql);
        foreach ($result as $k => $v) {
            $result[$k]['content'] = substr(stripHTML(htmlspecialchars_decode($v['content'])), 0, 30) . '......';
            $result[$k]['time'] = date('Y / M / D', $v['time']);
        }

        //返回总页码数
        $VModel = new HuanShanVoteModel();
        $sql = 'select title,content from wz_content';
        $alllist = $VModel->query($sql);
        $count = count($alllist);
        $pagecount = ceil($count / $percount);

        echo json_encode(array('success'=>1,'msg'=>'查询成功','data' => array('pagecount' => $pagecount, 'list' => $result)));
        exit();
    }

jquery swipper插件的一些弊端

jquery swipper插件的一些弊端
touch触摸机制是swipper的

阻止click冒泡。拖动Swiper时阻止click事件。下面这个方法或许可以解决触摸机制的问题

<div class="swiper-slide" onclick="alert('你点了Swiper')">
<script language="javascript"> 
var mySwiper = new Swiper('.swiper-container',{
preventLinksPropagation : false,
})
</script>

2动画问题 swipper动画影响是全局的 每次操作会影响每个container 所以 动画只能用在1给地方是最稳定的

3 在苹果手机上 无限点击会闪屏 这种情况只能做弹出层 不要写在swiper里面了

ps:swiper3.x 只适用于移动端 pc端兼容性较差ie10以下估计不兼容) 建议用swiper2.x
Animate.css动画库也是

jquery ajax怎么使用jsonp跨域访问

在项目中使用接口的比较多,在客户端跨域访问,jquery中只能使用jquery ajax的jsonp方法。

值得注意的是,jQuery.ajax()只支持get方式的跨域,post的方式是不支持的。

    <script type="text/javascript">   
     
    // 简写形式 
    $.getJSON("http://www.shuchengxian.com/index.php?callback=?",  
        function(data){  
    $("#show").text(data)  
    }); 
     
    // 完整形式 
    $.ajax({    
       async:false,    
       url: 'http://www.shuchengxian.com/index.php?callback=?',  // 跨域URL  callback参数必填  
       type: 'GET',    
       dataType: 'jsonp',    
       jsonp: 'jsoncallback', //默认callback   
       data: mydata, //请求数据   
       timeout: 5000,    
       beforeSend: function(){  //jsonp 方式此方法不被触发。原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了   
       },   
       success: function (json) { //客户端jquery预先定义好的callback函数,成功获取跨域服务器上的json数据后,会动态执行这个callback函数    
           if(json.length!=0){    
       alert(json.actionErrors);    
           }    
       },       
       error: function(xhr){    
           // jsonp 方式此方法不被触发   
           // 请求出错处理    
           alert("请求出错(请检查相关度网络状况.)");    
       }    
     });    
    </script>

这种方式其实是上例$.ajax({..}) 的一种高级封装。

在服务端通过获得callback参数(如:jsonpcallback)得到jQuery端随后要回调的,

然后返回类似:”jsonpcallback(“+要返回的json数组+”)”;

jquery就会通过回调方法动态加载调用这个:jsonpcallback(json数组);

如果为jQuery默认,则为随机jsonp1356493334400之类的数据。这样就达到了跨域数据交换的目的。

JSONP是一种脚本注入(Script Injection)行为,所以也有一定的安全隐患。

注意:jquey是不支持post方式跨域的。

所以一般不建议用jsonp跨域访问 而是PHP后台控制下 添加下要访问的域名 即可不用跨域

    //处理跨域  
        header("Access-Control-Allow-Origin:*"); //*号表示所有域名都可以访问  
        header("Access-Control-Allow-Method:POST,GET");  

获取可以用用PHP curl也可以进行跨域访问