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从零基础到实战也不是看看就能理解的，希望大家能够边自己实践边理解，这样更有利于大家成长，谢谢！