jquery Ajax 案例

html

<div class="data"><ul></ul></div>
<div id="load">点击加载</div>

css

/*Ajax loading*/
#load{
    display: block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #666666;
    background-color: #f7f7f7;
}
.loading{
    width: 40px;
    height: 40px;
    margin: 0 auto;
    background: url(images/loading.png) center center no-repeat;
    background-size: auto 60%;
    -webkit-animation: 2s linear 0s normal none infinite loadrotate;
    animation: 2s linear 0s normal none infinite loadrotate;
}
@keyframes loadrotate{
    0%  {transform: rotate(0deg);}
    50% {transform: rotate(180deg);}
    100%{transform: rotate(360deg);}
}
@-webkit-keyframes loadrotate{
    0%  {transform: rotate(0deg);}
    50% {transform: rotate(180deg);}
    100%{transform: rotate(360deg);}
}

js

$(function(){
    var page = 1;
    var ajax_getting = false;

    //fn Ajax
    function ajaxData(){
        var dataList = $.ajax({
            type: "GET",
            url: "../data/data" + page + ".json", //request url
            timeout: 10000,
            async: true,
            dataType: "json",
            success: function(data){
                if(data.data.length < 1){
                    $("#load").html(‘没有更多数据‘).unbind("click");;
                    return false;
                }else{
                    for (var i = 0; i < data.data.length; i++) {
                        newHtml($(".data"),data.data[i])
                    };
                    $("#load").html(‘点击加载‘);
                    page++; //after load success to plus page number
                }
                ajax_getting = false;
            },
            complete: function(XMLHttpRequest,status){
                if(status == ‘timeout‘){
                    aftError("请求超时",dataList);
                }
                if(status == ‘error‘){
                    aftError("异常",dataList);
                }
            }
        })
    }

    //fn click to load data
    $("#load").click(function(){
        $(this).html(‘<div class="loading"></div>‘);
        setTimeout(function(){
            ajaxData()
        },100)
    })

    //fn scroll to load data
    $(document).scroll(function(){
        var scrollT = $(document).scrollTop();
        var windH = $(window).height();
        var docuH = $(document).height();
        if(scrollT > docuH-windH-1){
            if(ajax_getting){
                return false;
            }else{
                ajax_getting = true;
            }
            $("#load").trigger("click");
        }
    })

    //append html code
    function newHtml(ele,objItem){
        var htmlPlus = ‘‘;
        htmlPlus += ‘<li>‘;
        htmlPlus += ‘<a href="‘+ objItem.link +‘">‘;
        htmlPlus += ‘<img src="‘+ objItem.imgurl +‘">‘;
        htmlPlus += ‘<span class="v_tit">‘+ objItem.title +‘</span>‘;
        htmlPlus += ‘</a>‘;
        htmlPlus += ‘</li>‘;
        ele.find("ul").append(htmlPlus);
    }

    //fn after error
    function aftError(txt,self){
        self.abort();
        alert(txt);
        $("#load").html(‘点击加载‘);
        ajax_getting = false;
    }

    //first loading
    $("#load").trigger("click");
})

json

{
    "name": "videoList",
    "data": [
        {
            "title": "电影标题1",
            "imgurl": "style/images/v1.jpg",
            "link": "videoDetail.html"
        },
        {
            "title": "电影标题2",
            "imgurl": "style/images/v1.jpg",
            "link": "videoDetail.html"
        },
        {
            "title": "电影标题3",
            "imgurl": "style/images/v1.jpg",
            "link": "videoDetail.html"
        },
        {
            "title": "电影标题4",
            "imgurl": "style/images/v1.jpg",
            "link": "videoDetail.html"
        },
        {
            "title": "电影标题5",
            "imgurl": "style/images/v1.jpg",
            "link": "videoDetail.html"
        },
        {
            "title": "电影标题6",
            "imgurl": "style/images/v1.jpg",
            "link": "videoDetail.html"
        },
        {
            "title": "电影标题7",
            "imgurl": "style/images/v1.jpg",
            "link": "videoDetail.html"
        },
        {
            "title": "电影标题8",
            "imgurl": "style/images/v1.jpg",
            "link": "videoDetail.html"
        },
        {
            "title": "电影标题9",
            "imgurl": "style/images/v1.jpg",
            "link": "videoDetail.html"
        },
        {
            "title": "电影标题10",
            "imgurl": "style/images/v1.jpg",
            "link": "videoDetail.html"
        }
    ]
}
时间: 2024-10-28 14:52:01

jquery Ajax 案例的相关文章

jquery ajax 总是还未等到success回调就刷掉了,就进入了onError函数的错误案例分析

jquery ajax 总是还未等到success回调就刷掉了,就进入了onError函数的错误案例分析: 同样的请求同时请求了2次,然后第二次的请求把第一次的给刷掉了! (比如:<div onclick="ajax(url)"><a onclick="ajax(url)">获取接口数据</a></div>)点击“获取接口数据”将触发函数ajax(url)2次!这样就有问题! 比如如果是购物车的“加入购物车”的按钮式这

JavaScript的ajax与jQuery的ajax案例分析

先谈JavaScript的ajax,传输数据为json #############################################JavaScript ajax json########################################### 注意:由于要用到json的JSON.stringify()方法,需要引入json2.js库. html代码: <!DOCTYPE html><html lang="en"><head&g

jQuery - AJAX (来源于W3C)

jQuery - AJAX 简介 AJAX 是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新. 什么是 AJAX? AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML). 简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示. 使用 AJAX 的应用程序案例:谷歌地图.腾讯微博.优酷视频.人人网等等. 关于 jQuery 与 AJAX jQuery 提供多个与 AJAX 有

Jquery ajax 参数 详解

Jquery ajax 参数主要如下: url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步

JQuery AJAX介绍

new ActiveXObject("Microsoft.XMLHTTP")是IE中创建XMLHttpRequest对象的方法.非IE浏览器中创建方法是new XmlHttpRequest(). 为了兼容不同的浏览器需要编写很多代码回调函数中data参数为服务器返回的数据,textStatus为服务器返回状态码,textStatus为"success"表示成功. JQuery中提供了简化ajax使用的方法. $.ajax()函数是JQuery中提供的 ajax访问函

jQuery Ajax向某个页面传值并取得返回的数组

本案例讲诉通过Ajax向某个PHP页面传值,并将得到的数组通过json_encode()函数处理,然后返回给ajax,下面是在实际案例摘取的部分代码: PHP页面 public function showChatName(){ $chat = A('Article','Event'); $res = $chat->selectName(I('get.channel')); echo json_encode($res); } 数组$res经过json_encode处理后的输出形式 {"cha

Jquery Ajax 跨域调用asmx类型 WebService范例

摘要:Ajax 在 Web 2.0 时代起着非常重要的作用,然而有时因为同源策略(SOP)(俗称:跨域问题(cross domain)) 它的作用会受到限制.在本文中,将学习如何克服合作限制.本文以asmx方式搭建webservice作为测试用后端,给出完整的前后端调用解决方案.范例代码. 关键词: jquery ajax 跨域  webservice  asmx  cross-domain 0 问题分析 0.1 什么是跨域问题? 越来越多的网站需要相互协作.例如,在线房屋租赁网站需要谷歌地图的

JQuery AJAX $.ajax()方法

AJAX = Asynchronous JavaScript and XML. AJAX 是一种创建快速动态网页的技术. AJAX 通过在后台与服务器交换少量数据的方式,允许网页进行异步更新.这意味着有可能在不重载整个页面的情况下,对网页的一部分进行更新. JQuery脚本库里所提供的AJAX提交的方法有很多,但主要的方法有$.get(),$.post(),$.ajax().其中$.ajax()是前两种方法的底层实现,可以提供比前两者更多的属性与参数设置,如果需要高级的设置使用,建议使用$.aj

JQuery AJAX $.get()方法

AJAX = Asynchronous JavaScript and XML. AJAX 是一种创建快速动态网页的技术. AJAX 通过在后台与服务器交换少量数据的方式,允许网页进行异步更新.这意味着有可能在不重载整个页面的情况下,对网页的一部分进行更新. JQuery脚本库里所提供的AJAX提交的方法有很多,但主要的方法有$.get(),$.post(),$.ajax().其中$.ajax()是前两种方法的底层实现,可以提供比前两者更多的属性与参数设置,如果需要高级的设置使用,建议使用$.aj