ajax從零基礎到實戰

 

一. 什么是AJAX？

 

ajax是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。

 

二. 在項目中怎么運用AJAX？

項目主要文件夾目錄有img文件夾，css文件夾，js文件夾，如果你要運用到ajax，那么你可以在js里面建立一個js文件存放ajax代碼，在相應html頁面引入這個js文件即可。

 

三. AJAX的結構怎么寫？

 

        //ajax的結構
            $(function(){
                $.ajax({
                    url:"https://www.xxxx.com/shop/xxxxxxx/", //放置你的接口
                    type : "GET", //接口的請求方式（get/post）
                    async : false, //是否異步
                    success : function(data) {
                        console.log("------成功了")
                    },
                    error : function(err) {
                        console.log("------出錯了",err)
                    }    
                });
            })
            

 

四. AJAX的接口參數怎么傳？

 

1.接口的形式是：https://www.xxxx.com/shop/xxxxxxx/?userId=123&psw=abc123&name=騎馬行天下 ；

2.根據后台給的接口文檔來選擇上傳哪些參數；

3.參數從哪里獲取呢？

a.從你該接口相對應的html頁面里面獲取；

b.獲取形式為：var psw = $("input[name='phones']").val()   //這種是獲取到input輸入框里面的值

                        var name = $("#username").html()    //這種是獲取到標簽里面的內容

 

代碼如下：

    //例如登錄接口要傳手機號和密碼兩個參數
    $("#denglu").click(function() {
        var userinfo = {
            "UserPhoneNum": '86//' + $("input[name='phones']").val(), //手機號參數
            "Password": $("input[name='pwd']").val()  //密碼參數
        }

        $.ajax({
            url: "https://www.xxxxxx.cn/user/xxxxx/",   //登錄接口
            data: userinfo,   //整合手機號和密碼的參數
            type: "get",
            success: function(data) {
                if(JSON.parse(data).state === 201 || JSON.parse(data).state === 202) {
                    alert("登錄失敗，請前往注冊")
                } else {
                    alert("登錄成功")
                    window.location.href = 'index.html';
                }
            },
            error: function() {
                alert("登錄失敗");
            }
        });

    });

 

五. 怎么用AJAX在頁面渲染接口數據？

 

1.首先在html頁面寫出能夠呈現死數據的html代碼；

2.然后書寫商品列表接口，獲取到里面的json數組並呈現到頁面；

 

代碼如下：

            //商品接口在頁面渲染數據
            $(function(){
                $.ajax({
                    url:"https://www.xxxxxx.com/shop/xxxxxxx/", 
                    type : "GET",
                    async : false,
                    success : function(data) {
                        var obj=JSON.parse(data).list;  //定義一個obj，獲取到接口數據為list的數組
                        var str="";   //定義一個空文件
                        $(".books").empty();   //把你要渲染的數據那塊給清空，然后加入接口數據變成活數據
                        
                        if(obj!=null){
                            //遍歷obj數組
                            $(obj).each(function(i,v){                   
                             //你之前寫的html里面的死數據代碼     
                             str+='<a class="to-product" target="_blank">';
                                   str+='<div class="books-con-lists bookarr">';
                                      str+='<img src='+v.picPath+' />';
                                      str+='<p class="p1">'+v.goodsName+'</p>';
                                      str+='<p class="p2">'+v.goodsresume+'</p>';
                                      str+='<p class="p3"><span class="p4">¥</span>'+v.price+'.00'+'</p>';
                                   str+='</div>';
                               str+='</a>'; 
                               
                            });
                            $(".books").append(str);   //使用append參數把內容加上去
                        }

                    },
                    error : function(err) {
                        console.log("渲染出錯了",err)
                    }    
                });
            })
            

 

六. 怎么異步刷新呈現在頁面上面的內容？

 

例如：如果你有一個獲取收貨地址的接口，你呈現在頁面上面，然后你重新添加一條，收貨地址列表沒有改變，重新刷新頁面才能改變，如果你要點擊保存就刷新掉收貨地址列表而不用刷新整個頁面怎么實現呢？

 

代碼如下：

$(function() {
    InitData(); //加載收貨地址
})

//收貨地址呈現數據列表接口
function InitData() {

    $.ajax({
        url: "https://www.xxxxx.com/user/xxxxxx/", //收貨地址
        type: "get",
        async: true,
        success: function(data) {
        }
    })
}

 $("#jiaru").click(function() { $.ajax({ url: "https://www.xxxxxx.cn/user/xxxxx/", //重新加入一條收貨地址接口 type: "get", success: function(data) { InitData()； //加入成功后，再次調用一次查詢收貨地址接口，就能實現異步刷新 }, error: function() { alert("加入失敗"); } }); });

 

七. 登錄成功后獲取到用戶userId怎么在后面的接口引用到呢？

 

1.首先登錄成功后返回給你一個用戶id，參數比如說是userId，你可以cookie保存一下然后到后面獲取到；

2.怎么cook保存呢？

a.建立一個全局js文件，全局定義一下cookie：

//Cookie全局
function setCookie(name,value)
{
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

function getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}

b.在登錄接口頁setCookie保存到userId：

//登錄
    $("#denglu").click(function() {

        $.ajax({
            url: "https://www.xxxxxx.cn/xxxxx/login/",
            data: "",
            type: "get",
            success: function(data) {
                var userId = JSON.parse(data).UserID;  //從接口返回值里面取到userId
                setCookie("UserId", userId)   //set保存一下方便后面取到
                if(JSON.parse(data).state === 201 || JSON.parse(data).state === 202) {
                    alert("登錄失敗，請前往注冊")
                } else {
                    alert("登錄成功")
                    window.location.href = 'index.html';
                }
            },
            error: function() {
                alert("登錄失敗");
            }
        });

    });

c.在其他頁面getCookie獲取到userId：

var userId = getCookie("UserId");   //在上面提到的接口傳值，getcookie獲取到userId

3.sessionStorage保存方法：

sessionStorage.obj = JSON.parse(data).OrderID;

 

 

 

八. 沒有接口的情況下，怎么把一個頁面的值傳到其他頁面？

 

1.url傳值方法：

$(".to-product").eq(0).click(function(){
     $(".to-product").eq(0).attr("href","bookdetail/productdetail1.html?goodsID="+obj[0].goodsID+"");
})

2.其他頁面取值：

function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //構造一個含有目標參數的正則表達式對象
        var r = window.location.search.substr(1).match(reg); //匹配目標參數
        if(r != null) return unescape(r[2]);
        return null; //返回參數值
    }
var goodsID = getUrlParam('goodsID'); //接收URL中的參數booksId

3.重點注意：這種方法不利於上傳價格之類容易篡改信息的數據，建議其他數據通過接口的方法獲取；

 

九. 怎么清空cookie保存的數據（比如退出登錄效果）

 

//獲取到用戶ID
var userId = getCookie("UserId");
//判斷一下userId是否為空
if(userId !=null){
    $(function(){
      //點擊按鈕退出登錄
      $(".header-con").children(".p2").children("a:eq(1)").click(function(){
            clearAllCookie();  //清空cookie的方法
      })
    })    
}else{

}

//清除所有cookie函數
function clearAllCookie() {
    var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
    if(keys) {
        for(var i = keys.length; i--;)
            document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString()
        }
 }

 如果只需要清空用戶ID,則這樣寫：

//清除所有cookie函數
function clearAllCookie() {
    var keys = document.cookie.match(“ID”);
    if (keys) {
        for (var i = keys.length; i--;)
        document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString()
    }
}

 

 

 

十. 怎么獲取接口中單個列表信息的數據？

 

1.遍歷列表獲取到該商品的信息，取到想要得到的id或者價格：

//遍歷
$('#txt-list tr').each(function() {

  var _value = $(this).find('td').next(".isCurrent").text();
  if(parseInt(_value) == 1) {

  } else {

  }
});

 

2.parent和next方法等：

var addressID = $(this).parent("a").parent("td").next("td").next("td").html();

 

十一. 怎么拼接字符串並放到一個數組里面？

 

1.先創建一個新的對象，遍歷json數組，然后拼接完成之后，去掉拼接進去的數組[ ]符號以及字符串的\符號：

        var goodsDetail = new Array();
        $('#s-infos li').each(function(index){
            if($(this).find('div').children('.mh-dxone').prop('checked')){
               var goodsID = $(this).find('div').next(".goodsID").text(),
               quanlity = $(this).find('div').next(".shopcart-info-num").children(".cartnum").val();
               goodsDetail.push('[{"goodsID":' + goodsID + ',"quanlity":' + quanlity + '}]');
           }
       })
        var straaa = JSON.stringify(goodsDetail);
        var strbbb = straaa.replace('"[', "");
        var strccc = strbbb.replace(']"',"").replace(/[\\]/g,'');

 

十二. 瀏覽器后退按鈕

 

這個在注冊或者登陸的時候是一個普遍的問題，登陸之后，跳轉到另外一個頁面，我的鼠標有兩個側鍵，是用於前進和后退的，有時候會誤點側鍵，這個時候頁面又會回到之前的登錄頁面，但事實是用戶已經登錄了，所有頁面的狀態都應該是已登錄的，不管什么情況下都不應該讓用戶在看到這個頁面。用戶的點擊操作會引發上面的問題，而程序 history.go(-1) & history.back() 也會有一樣的bug。

這樣的問題處理方案比較簡單，ajax 拿到 success 的狀態碼時立刻做跳轉，但是這里不能用 window.location.href="index.html"，這樣瀏覽器還是會記錄這個登錄歷史，應該使用 window.location.replace("index.html")，替換當前歷史記錄。

 

十三. ajax怎么用表單提交數據

$(".subbookorder").click(function() {
    //開始上傳文件 新建一個formData
    var param = new FormData();
    param.append("totalPrice", totalprice);
    //        //通過append向form對象添加數據
    param.append("discountId", 1);
    param.append("purchaseComment", '');
    param.append("paymentContent", '');
    param.append("details", JSON.stringify(orderData));

    $.ajax({
        type: "post",
        url: "http://manage.xxxxx.cn/user/xxxxxx/",
        data: param,
        cache: false,
        processData: false,
        contentType: false,
        headers: {
            "Accept": "application/json",
             Authorization: "Bearer " + getCookie("token"),
        },

        success: function(data) {
            console.log(data)
            window.location.href = "payOrder.html";
        },
        error: function(e) {
            console.log("err");
        }
    });

})

 

十四. ajax的headers的方法

headers: {
    "Accept": "application/json",
     Authorization: "Bearer " + getCookie("token"),
        "Content-Type": "application/json"，
        "Content-Type": "multipart/form-data",
},

 

十五. 總結

 

ajax介紹就暫時到這里告一段落了，如果博文有什么錯誤或者不懂的地方，歡迎在博文下面留言，博主有時間將一一解答，同時ajax從零基礎到實戰也不是看看就能理解的，希望大家能夠邊自己實踐邊理解，這樣更有利於大家成長，謝謝！