JQuery中ajax的簡單使用教程（附帶例項程式碼）

阿新 • • 發佈：2019-02-10

當接觸一項新技術時，首先我們要問自己四個問題，如果這四個問題我們都能學習並理解到位，那麼可以說這個新技術你已經完成了初步掌握，下面我們就這四個問題來說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>

JQuery中ajax的簡單使用教程（附帶例項程式碼）

JQuery中ajax的簡單使用教程（附帶例項程式碼）

jQuery之ajax資料互動（語法及示例）

Java中的反射機制（附例項程式）

這是一份很詳細的 Retrofit 2.0 使用教程（含例項講解）

jquery中的slice方法（個人使用總結）

Echarts 地圖生成以及生成geojson檔案（附帶完整程式碼）

python中如何遍歷資料夾及其子資料夾中的所有檔案（附實現程式碼）

《微信公眾平臺開發教程（含java程式碼）》下載

SpringMVC表單資料增刪改查簡易梳理（含例項程式碼）

圖之 Dijkstra演算法（附帶習題程式碼）

jQuery中ajax應用的一個例項（前端+controller）

JQuery中$.ajax()方法參數詳解（轉載）

jquery中$.ajax $.get $.post 和$.getJSON的區別和用法（轉載）

opencv中的影象簡單的線性融合（附帶測試程式）

JQuery中ajax使用方法

fullpage.js簡單教程（一）

jQuery中ajax的4種常用請求方式

jquery中ajax處理跨域的三大方式

jquery中ajax的相關事件匯總

Jquery中AJAX參數詳細(1)-轉

JQuery中ajax的簡單使用教程（附帶例項程式碼）

相關推薦