jQuery中的Ajax

__Yany

已于 2022-09-21 13:21:25 修改

阅读量313

点赞数

文章标签： jquery javascript ajax

于 2022-09-21 13:18:21 首次发布

本文链接：https://blog.csdn.net/mumu123abc/article/details/126970704

版权

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

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

$.get()函数的语法

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

$.get()函数的语法：

$.get(URL,callback); 
或 
$.get( URL [, data ] [, callback ] [, dataType ] )

URL：发送请求的 URL字符串。string
data：可选的，发送给服务器的字符串或 key/value 键值对。object
callback：可选的，请求成功后执行的回调函数。functioin
dataType：可选的，从服务器返回的数据类型。默认：智能猜测（可以是xml, json, script, 或 html）。

$.get()发起不带参数的请求

使用$.get()发起不带参数的请求时，直接提供请求的url地址和请求成功后的回调函数即可

示例：

所有的ajax请求都在Network的 XHR中查看

用到的jquary知识点

基础语法： $(selector).action()

美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作

文档就绪事件

为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作

简洁写法：

$(function(){

// 开始写 jQuery 代码...

});

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

语法：$(selector).on(event,childSelector,data,function)

参数	描述
event	必需。规定要从被选元素添加的一个或多个事件或命名空间。由空格分隔多个事件值，也可以是数组。必须是有效的事件。
childSelector	可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
data	可选。规定传递到函数的额外数据。
function	可选。规定当事件发生时运行的函数。

$.get()发起带参数的请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用get获取请求</title>
    <script src="./lib/jquery.js"></script>
</head>
<body>
    <button id="btnGET">发起不带参数的get请求</button>
    <button id="btnGETINFO">发起带参数的get请求</button>
    <script>
        // 文档就绪事件   简介写法
        // 实例中的所有 jQuery 函数位于一个 document ready 函数中
        // 防止文档在完全加载（就绪）之前运行 jQuery 代码，
        // 即在 DOM 加载完成后才可以对 DOM 进行操作
        $(function(){
            $("#btnGET").on("click",function(){
                $.get("http://www.liulongbin.top:3006/api/getbooks",function(res){
                    console.log(res);
                })
            });
            $("#btnGETINFO").on("click",function(){
                $.get("http://www.liulongbin.top:3006/api/getbooks",{id:1},function(res){
                    console.log(res);
                })
            })
        })
    </script>
</body>
</html>

$.post()函数的语法

语法:

$.post(URL,callback);
 或 
$.post( URL [, data ] [, callback ] [, dataType ] )

URL：发送请求的 URL字符串。
data：可选的，发送给服务器的字符串或 key/value 键值对。
callback：可选的，请求成功后执行的回调函数。
dataType：可选的，从服务器返回的数据类型。默认：智能猜测（可以是xml, json, script, 或 html）。

$.ajax()函数的语法

$.ajax()函数的语法https://www.runoob.com/jquery/ajax-ajax.html

__Yany

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫