05-jQuery的ajax

一、使用

$.ajax({本次发送ajax的配置项})

配置项：
url:必填，表示请求地址
type/method:选填，默认是GET，表示请求方式
data:选填，默认是''，表示携带给后端的参数
async：选填，默认true，表示同步
sucess：选填，表示请求成功的回调函数
error：选填，表示请求失败的回调函数。

$.ajax({
    type:'GET', //GET、POST、PUT、DELETE都可以自行制定
    url:'',
    data:{},
    sucess:function(res){
            
    }
})

//内部封装好的get请求方法
$.get('url',data,res=>{
   //回调函数
})
//内部封装好的post请求方法
$.post('url',data,res=>{
})

e.preventDeafult() 阻止默认事件，常用于阻止表单默认提交
e.stopPropagation() 阻止冒泡事件

二、例子

表单提交
登陆页：

//标单提交按钮
$('form').on('submit',function(e){
    //阻止默认提交事件
    e.preventDefault()
    //采集表单信息，获取表单中name属性及value值
    const data=$('form').serialize()
    //发送请求
    $.post('http://..',data,res=>{
            if(res.code===0){
                $('form>span').css('display','block')    //失败提示消息展示       
                return
            }
    #为了在首页获取用户信息，需要登陆时拿到token和id(凭证信息是后端规定的)存到localStorage中，永久存储，浏览器f12查看应用程序
    window.localStorage.setItem('token',res.token)
    window.localStorage.setItem('id',res.uese.id)
    window.location.href='./index.html'
    })
})

$(’form‘).serialize() 序列化表单数据，要求表单项有name属性，可以拿到值
$.post(‘url’,data,res=>{}) #提交数据

首页：

const token=window.localStorge.getItem('token')
const id=window.localStorge.getItem('id')

if(!token || !id){
    //表示没有登陆，不展示登陆后的个人信息
    $(".off").addClass('active')
    $('.on').removeClass('active')
}else{
    getInfo()  //请求用户信息
}

function getInfo(){
    //此处不用get是因为我们要封装请求
    $.ajax({
            url:'http://...',
            method:'GET',
            data:{id:id},
            headers:{   
                authorization:token            
            },
            sucess(res){
                 if(res.code !==1){ //状态码是后端规定的， 获取失败时
                   $(".off").addClass('active')  //未登陆提示框标签展示
                   $('.on').removeClass('active')   //登陆显示内容标签不展示                
                   return
                  }else{
                      $('.on').addClass('active').find('span').text(res.info.nikename)                  
                      $('.off').removeClass('active')
                    }    
            }
    })
}
//个人中心跳转
$('button.self').on('click',function(){
    window.location.href = './self.html'
})

//退出登录
$('button.logout').on('click',function(){
    $.get('url',{id:id},res=>{
    window.location.reload()
})
}) 

未登陆或登陆后获取用户信息失败时：

登陆成功后，获取用户信息成功：

个人中心：

const token=window.localStorge.getItem('token')
const id=window.localStorge.getItem('id')

if(!token || !id){
    //表示没有登陆，不展示登陆后的个人信息
    window.location.href='./login.html'
}else{
    getInfo()
}

function getInfo(){
    //此处不用get是因为我们要封装请求
    $.ajax({
            url:'http://...',
            method:'GET',
            data:{id:id},
            headers:{
                authorization:token            
            },
            sucess(res){
                 if(res.code !==1){
                   window.location.href='./login.html'                                  
                   return
                  }else{
                     //获取到个人中心数据填充到表单中
                     $('form .username').val(res.info.username)
                     ...
                    }    
            }
    })

//修改个人信息
$('form').on('submit',function(e){
    e.preventDefault()
    
    const data = $('form').serialize()
    
    $.ajax({
        url:'',
        method:'POST',
        data:data + '$id='+id,  //按照后端接收数据方式进行参数拼接
        headers:{authorization:token},
        sucess(res){
            if(res.code === 1){
                window.alert('修改个人数据成功')            
            }        
        }    
    })
})

修改密码：

const token=window.localStorge.getItem('token')
const id=window.localStorge.getItem('id')

if(!token || !id){
    //表示没有登陆，不展示登陆后的个人信息
    window.location.href='./login.html'
}else{
    getInfo()
}

//获取用户信息
function getInfo(){
    //此处不用get是因为我们要封装请求
    $.ajax({
            url:'http://...',
            method:'GET',
            data:{id:id},
            headers:{
                authorization:token            
            },
            //判断是否有登陆，没有则跳转到登录页
            sucess(res){
                 if(res.code !==1){
                   window.location.href='./login.html'                                  
                   return
                  }   
            }
    })

//表单提交修改密码
$('form').on('submit',function(e){
    e.preventDefault()
    const data=$('form').serialize()
    
    $.ajax({
        url:'url',
        method:'POST',
        data:data+'$id='+id,
        headers:{authorization:tpken},
        sucess(res){
            if(res.code !== 1){
                $('form > span').css('display','block')
                return            
            }        
            window.alert('成功')
            window.location.href('./login.html')
        }    
    })
})