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

最新推荐文章于 2024-09-19 16:13:24 发布

精灵无悔

最新推荐文章于 2024-09-19 16:13:24 发布

阅读量3.3w

点赞数 20

分类专栏： ajax jquery 代码实例入门课程文章标签： angular jquery javascript ajax xml

本文链接：https://blog.csdn.net/v_111/article/details/71080666

版权

ajax jquery 代码实例入门课程专栏收录该内容

1 篇文章 0 订阅

订阅专栏

当接触一项新技术时，首先我们要问自己四个问题，如果这四个问题我们都能学习并理解到位，那么可以说这个新技术你已经完成了初步掌握，下面我们就这四个问题来说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>