jQuery中的Ajax

1.了解jQuery中的Ajax

浏览器中提供的 XMLHttpRequest 用法比较复杂，所以 jQuery 对 XMLHttpRequest 进行了封装，提供了一系列 Ajax 相关的函数，极大地降低了 Ajax 的使用难度。

jQuery 中发起 Ajax 请求最常用的三个方法如下：

① $.get()；
② $.post()；
③ $.ajax()；

2.$.get()函数的语法 

jQuery 中 $.get() 函数的功能单一，专门用来发起 get 请求，从而将服务器上的资源请求到客户端来进行使用。

$.get() 函数的语法如下：

$.get(url, [data], [callback])

其中，三个参数各自代表的含义如下：

参数名	参数类型	是否必选	说明
url	string	是	要请求的资源地址
data	object	否	请求资源期间要携带的参数
callback	function	否	请求成功时的回调函数

2.1 代码体验$.get()发起不带参数的请求

使用 $.get() 函数发起不带参数的请求时，直接提供请求的 URL 地址和请求成功之后的回调函数即可，示例代码如下：

<!-- 引入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
    $.get('https://www.bingjs.com:8001/Grade/GetAll',function(res){
        console.log(res);  // res里面保存的就是服务器端返回的数据
    })
</script>

2.2 代码体验$.get()发起带参数的请求

 使用 $.get() 函数发起带参数的请求时，示例代码如下：

<!-- 引入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
    $.get('https://www.bingjs.com:8001/Grade/GetOne',{id:1},function(res){
        console.log(res);  //res里面保存的依旧是服务器端返回的数据
    })
</script>

3.$.post()函数的语法

jQuery 中 $.post() 函数的功能单一，专门用来发起 post 请求，从而向服务器提交数据。

$.post() 函数的语法如下：

$.post(url, [data], [callback])

其中，三个参数各自代表的含义是：

参数名	参数类型	是否必选	说明
url	string	是	提交数据的地址
data	object	否	要提交的数据
callback	function	否	数据提交成功时的回调函数

3.1 代码体验$.post()向服务器提交数据

使用 $post() 向服务器提交数据的示例代码如下：

<!-- 引入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
    $.post(
        'https://www.bingjs.com:8001/Subject/Add',  // 请求的Url地址
        { subjectName: 'Vue系列课程', classHour: 35, gradeId: 2 },  // 提交的数据
        function (res) {   // 回调函数
            console.log(res);
        });
</script>

4.$.ajax()函数的语法

相比于 $.get() 和 $.post() 函数，jQuery 中提供的 $.ajax() 函数，是一个功能比较综合的函数，它允许我们对 Ajax 请求进行更详细的配置。

$.ajax() 函数的基本语法如下：

$.ajax({

   type: '',       // 请求的方式，例如 GET 或 POST

   url: '',         // 请求的 URL 地址

   data: { },    // 这次请求要携带的数据

   success: function(res) { }      // 请求成功之后的回调函数

})

4.1 使用$.ajax()发起GET请求

使用 $.ajax() 发起 GET 请求时，只需要将 type 属性的值设置为 'GET' 即可：

<!-- 引入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
    $.ajax({
        type:'GET',      // 请求的方式
        url:'https://www.bingjs.com:8001/Grade/GetOne',   // 请求的地址
        data:{id:1},         // 这次请求要携带的参数，无参数则为空{}
        success:res=>{   // 请求成功后的回调函数
            console.log(res);  
        }
    });
</script>

 4.2 使用$.ajax()发起POST请求

使用 $.ajax() 发起 POST 请求时，只需要将 type 属性的值设置为 'POST' 即可：

<!-- 引入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
    $.ajax({
        type: 'POST',   // 请求的方式
        url: 'https://www.bingjs.com:8001/Subject/Add',   // 请求的地址
        data: {        // 要提交给服务器的数据
            subjectName: 'Vue系列课程',
             classHour: 33,
              gradeId: 1
             },
        success: res => {   // 请求成功后的回调函数
            console.log(res);
        }
    });
</script>