JQuery中ajax的简单使用教程（附带实例代码）

来源：互联网发布：淘宝怎么才能投诉快递编辑：程序博客网时间：2024/06/05 06:35

当接触一项新技术时，首先我们要问自己四个问题，如果这四个问题我们都能学习并理解到位，那么可以说这个新技术你已经完成了初步掌握，下面我们就这四个问题来说ajax应该怎么学习。如果你已经看过我写的JS中ajax的使用教程，相信你对ajax已经有了一个基础了解。那么可以直接看第四部分，以便节约您的时间。

一，ajax是什么？
AJAX = 异步 JavaScript 和 XML。是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

二，ajax用在哪里？
简单说是需要连接数据库的地方，但是连接数据库传输的信息量很少，用不着刷新整个页面，这种类型的适合用ajax，避免了属性整个页面带来的资源浪费。

三，为什么要使用ajax？
减轻服务器的负担，按需取数，可以最大程度的减少冗余请求和响应对服务造成的负担。无恻新更新页面，减少用户心理和实际的等待时间。带来更好的用户体验。可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和速写的负担，节约空间和宽带租用成本。可以调用外部数据。基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。进一步促进页面呈现和数据的分离。

四，怎么使用在JS中使用ajax？使用时我们要了解的基础知识

1，JQuery是什么东西？
是一个JavaScript类库，封装了大量的JavaScript底层代码。

2，JQuery的Ajax操作，对JavaScript底层Ajax操作进行了封装，提供了两种方法进行操作
第一种是底层的$.ajax()操作

$.ajax({            url:"url",            type:"get",            dataType:"json",            data:{                userID:"1"            },            success:function(response){            },            error:function() {            }        });

第二种是快捷操作$.get()..$.post()...

$.get(            "url",            {userID:"123"},            function(response) {            }        )

$.post(            "url",            {userID:"123"},            function(response) {            }        )

简单实例

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" href="js/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">    <script src="js/lib/jquery2.2.4/jquery-2.2.4.js"></script>    <script src="js/lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>    <style>        .thumbnail{            max-height:350px;            height:330px;            overflow:hidden;        }        .thumbnail > img{            width:140px;height:140px;        }    </style></head><body><div class="container">    <div class="row hotgoodslist">        <div class="page-header">            <h1>热销商品<small>年度热销商品排行榜</small></h1>        </div>        <!--<div class="col-sm-4 col-md-3">            <div class="thumbnail">                <img src="..." alt="...">                <div class="caption">                    <h3>￥<span>400</span></h3>                    <p>商品名称</p>                    <p>                        <a href="#" class="btn btn-danger" role="button">加入购物车</a>                        <a href="#" class="btn btn-primary" role="button">立即购买</a>                    </p>                </div>            </div>        </div>-->    </div>    <div class="row shirt">        <div class="page-header">            <h1>衬衫<small>众多品牌齐聚，商务休闲首选</small></h1>        </div>    </div></div><script>    $(function() {        /* 加载热销商品列表页*/        $.ajax({            url:"http://datainfo.duapp.com/shopdata/getGoods.php?callback=?",            type:"get",            dataType:"jsonp",            success:function(resp) {                console.log(resp);                for(var i = 0; i < resp.length; i ++) {                    // DOM操作添加商品                    var $goodsBox = $("<div>").addClass("col-md-3").addClass("col-sm-4");                    var $thumbnail = $("<div>").addClass("thumbnail");                    var $img = $("<img>").attr("src", resp[i].goodsListImg);                    var $caption = $("<div>").addClass("caption");                    var $priceSpan = $("<span>").text(resp[i].price);                    var $price = $("<h3>").text("￥").append($priceSpan);                    var $name = $("<p>").text(resp[i].goodsName);                    var $id = $("<p>").text(resp[i].goodsID).css("visible", "hidden");                    var $addCart = $("<button>").addClass("btn").addClass("btn-danger").text("加入购物车");                    var $buyNow = $("<button>").addClass("btn").addClass("btn-primary").text("立即购买");                    $caption.append($price);                    $caption.append($name);                    $caption.append($id);                    $thumbnail.append($img);                    $thumbnail.append($caption);                    $thumbnail.append($addCart);                    $thumbnail.append($buyNow);                    $goodsBox.append($thumbnail)                    $(".hotgoodslist").append($goodsBox);                }            }        });        /*         加载衬衫商品列表页         */        $.ajax({            url:"http://datainfo.duapp.com/shopdata/getGoods.php?callback=?",            type:"get",            data:{                classID:1            },            dataType:"jsonp",            success:function(resp) {                console.log(resp);                for(var i = 0; i < resp.length; i ++) {                    // DOM操作添加商品                    var $goodsBox = $("<div>").addClass("col-md-3").addClass("col-sm-4");                    var $thumbnail = $("<div>").addClass("thumbnail");                    var $img = $("<img>").attr("src", resp[i].goodsListImg);                    var $caption = $("<div>").addClass("caption");                    var $priceSpan = $("<span>").text(resp[i].price);                    var $price = $("<h3>").append($priceSpan);                    var $name = $("<p>").text(resp[i].goodsName);                    var $id = $("<p>").text(resp[i].goodsID).css("visible", "hidden");                    $caption.append($price);                    $caption.append($name);                    $caption.append($id);                    $thumbnail.append($img);                    $thumbnail.append($caption);                    $goodsBox.append($thumbnail)                    $(".shirt").append($goodsBox);                }            }        });    })</script></body></html>

0 0