四、jQuery-ajax

一、jquery-ajax的传参

1.请求的地址url
2.请求的方式 type:get,post
3.数据类型  datatype:json  jsonp
4.data
5.数据连接成功 success
6.连接失败 error
7.beforeSend()--连接成功之前的一个函数

二、请求方式

2-1 $.ajax()

window.onload = function(){
$.ajax({
    type:"get",
    url:"xx",
    dataType:"json",
    success:function(data){
        console.log(data);
    },
    error:function(xhr){
        document.body.innerHTML = xhr.status;
    }
})

2-2 $.get()

//$.get()语法
$.get(url,function(data,status){
//获取的data是一个JS对象

}).fail(function(data){
    console.log(data.status)
})

2-3 $.post()

//$.post()语法
$.post(url,data,function(data,status){

}).fail(function(data){
    console.log(data.status)
})

三、实现简单的加载条

jquery-js
1.可以直接搜索jQuery  进入jQuery官网
2.点击Download jQuery  下载
3.下载完了之后放进自己的文件夹下，就可以在本地直接引用
<script src="lib/jquery-3.4.1.js"> </script>

<style>
  body{
    background:pink;
  }
#loading{
  position:fixed;
  left:0;right:0;top:0;bottom:0;
  display:flex;
  justify-content:center;
  align-items:center; 
  background:red;
}

    <div id="loading">
        <img src="images/giphy.gif" alt="">     
    </div>
    加载成功
    <script>
        var url="https://www.easy-mock.com/mock/5d67436224fd60626abfe906/ajax/base"
        /* ajax传参
        1.请求的地址
        2.请求的方式 get,post
        3.数据类型
        */
        $.ajax({
            url:url,
            type:"get",
            dataType:"json",
            //实现加载画面
            //连接成功
            success:function(res){
                console.log(res)
                $("#loading").hide()
            },
            //连接失败
            error:function(err){
                console.log(err)
            },
            //发送之前
            beforeSend:function(){
                $("#loading").show()
            }     
        })
        </script>

用jQuery实现ajax时，需要$.ajax({…..})把参数写在括号里面