jQuery Ajax

jQuery Ajax

什么是 AJAX？

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示

jQuery为我们将原生ajax进行了封装，现在我们只需要一行简单的代码，就可以实现 AJAX 功能。

HTTP协议

本次ajax使用的还是http协议

1.原生js中Ajax

function getData(){
	//1.创建一个XMLHttpRequest的实例
    var request= new XMLHttpRequest();
    //2.open()
    request.open('get','url');
    //3.setRequestHeader()   根据发送的参数   设置对应的参数格式
    request.setRequestHeader('Content-Type','application/json;chartset=utf-8');
    //4. send()   发送请求
    request.send();
    //5.获取响应   
    //如果获取的数据   确保请求完成  200  响应完成readyState 4
    request.onreadystatechange= function(){
        if(request.readyState===4 && request.status===200){
            console.log(request.responseText);
            //request.responseText  是一个json字符串   
            //反序列化成string字符串
            var res =JSON.parse(request.responseText);
            console.log(res);
        }
        if(request.readyState===4 && request.status===500){
            console.log('错误：',request.responseText);
        }
    }
}

2.底层接口

// ajax 底层接口
 $.ajax({
     //请求的地址
      url:'',   
     //请求方式
      method:'post/get',          
     //请求参数，无参可不写
      data:{},
     //请求成功的回调函数
      success:function(res){
          console.log(res);   
      },
     //错误的回调函数
      error:function(err){
          console.log(err);   
      },
  })
  

3.快捷方式

// 快捷方式   以get-无参实例
  $.get('http://139.196.156.38:8888/index/article/findCategoryArticles',{},function(res){
        console.log(res);
   })

4.get 请求

• 一个参数时

  • 字符串拼接

  var type='epidemicRiskLevel'  
  $.get('https://api.muxiaoguo.cn/api/epidemic?type=' +type,function(res){
        console.log(res);
  })
  

  • 用对象传参

  // 参数用对象的模式传递
  var id=79;         
  $.get('http://139.196.156.38:8888/index/article/findById',{id:id},function(res){
       console.log(res);
  })
  

• 两个参数时

  • 使用对象传参

  // 4.快捷方式-get   有两个参数   参数用对象形式传入
  $.get('http://139.196.156.38:8888/index/article/pageQuery',{
              page:1,
              pageSize:10,
          },function(res){
              console.log(res);
          })
  

5.post 请求

• 1.登录接口 参数用json格式

  ​ 利用$.ajax向后台发送json字符串数据

  //post请求  用底层接口   参数为json格式数据
  $.ajax({
      url:'http://139.196.156.38:8888',
      method:'POST',
      //因为jQuery中ajax会自动将参数转换为查询字符串格式，而接口登录需要json格式的数据
      data:JSON.stringify({
          username:'admin1',
          password:'123321'
      })
      //将请求头设置为json格式
      contentType:'application/json',
      success:function(res){
      console.log(res);
  }
  })
  

  接口的参数格式

  ​ 1.查询字符串 key1=val&key2=val2

  ​ 2.json字符串 ‘{“key1”:“val”,“key2”:“val2”}’

  一般多个参数时用对象形式传参

  ​ 对象–>json 对象–>查询字符串

• 2. post 参数就要 查询字符串格式的

  $.post(‘url’,{},function(res){})

6.ajax

默认会把对象转换为查询字符串格式 contentType：”application/x-www-form-urlencoded“

7. axios (可通过CDN引入)

默认对象转换为json字符串格式，contentType：“application/json”

​ 利用axios向后台发送查询字符串数格式数据

var obj={
    name:'zhangsan',
    id:1123
}
axios({
	url:'http://139.196.156.38:8888/user/login',
	method:'post',
	//get请求，参数用params
	//params:'',   
	//post请求 参数用data
    //利用Qs.stringify()将对象转换为查询字符串格式
    //Qs需要CDN引入
	data:Qs.stringify(obj),
	//因为axios默认转换为json格式，headers需要改成查询字符串格式
	headers:{
	'content-Type':'application/x-www-form-urlencoded',
	}
}).then((res)=>{
	console.log(res)
})

8.全局设置 ajaxSetup()

swagger-ui大多数接口需要登录后才能使用

 // ajax 底层接口    post  请求登录
        $.ajax({
            url:'http://139.196.156.38:8888/user/login',
            method:'post',
            data:JSON.stringify({
                "password":"123321",
                "username":"admin1",
            }),
            contentType:'application/json',
            success:function(res){
                console.log(res.data.token);
                // 将token值传入header中
                $.ajaxSetup({
                    headers:{
                        Authorization:res.data.token
                    }
                })
            },
            error:function(err){
                console.log(err);
            }
            
        })
        
        $('button').click(function(){
            $.get('http://139.196.156.38:8888/article/findAll',{},function(res){
                console.log(res);
            })
        })

9. ajax事件

ajaxComplete() 请求完成时执行

ajaxError() 请求发生错误时执行

ajaxSend() 请求发送前执行

ajaxStart() 请求开始时执行

ajax Success() 请求成功时执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.0.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: goldenrod;
            display: none;
        }
        p{
            color: red;
        }
    </style>
    <script>
        $(function(){
            $.ajax({
            url:'http://139.196.156.38:8888/user/login',
            method:'post',
            data:JSON.stringify({
                "password":"123321",
                "username":"admin1",
            }),
            contentType:'application/json',
            success:function(res){
                console.log(res.data.token);
                // 将token值传入header中
                $.ajaxSetup({
                    headers:{
                        Authorization:res.data.token
                    }
                })
            },
            error:function(err){
                console.log(err);
            }
            
        })
            $('button').click(function(){
                $.get('http://139.196.156.38:8888/article/cascadeFindAll',{},function(res){
                console.log(res);
             
            })
            //ajaxSend()	请求发送前执行
            $(document).ajaxSend(function(){
                $('p').attr('style','color:green')
            })
            //ajaxStart()	 请求开始时执行
            $(document).ajaxStart(function(){
                $('div').attr("style",'display:block')
            })
            //ajax Success()	请求成功时执行
            $(document).ajaxSuccess(function(){
                $('div').attr('style','display:none')
            })

            })

        })
    </script>
</head>
<body>
    <div></div>
    <p>我是发送请求前的p标签</p>
    <button>点击按钮请求数据</button>
</body>
</html>