JQuery Ajax详解-优快云博客

本文链接：https://blog.youkuaiyun.com/Depressione/article/details/108418561

JQuery中的Ajax

JQuery不仅对JavaScript语言进行了封装，也对Ajax异步交互进行了封装。JQuery提供了6个Ajax操作的方法：

load()方法
$.get()方法
$.post()方法
$.ajax()方法
$.getScript()方法
$.getJSON(方法

还提供了以下几种事件：

ajaxStart()事件
ajaxStop()事件
ajaxComplete()事件
ajaxSend()事件
ajaxError()事件
ajaxSuccess()事件

load()方法

load()方法是JQuery中最为简单的Ajax方法，结构如下：

$element.load(url,[data,[callback]])

url：请求HTML页面的url地址
data：发送给服务器端的key/value形式的数据内容
callback：Ajax请求完成时的回调函数
- 返回值：服务器端的响应结果，并会自动的把响应结果写入到目标元素中

注意：load()方法的请求方式由是否传递参数决定。即传递参数，为get方法；不传递参数，为post方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>load()方法</title>
</head>

<body>
    <button>按钮</button>
</body>
<script src="./jquery-3.5.1.js"></script>
<script>
    $('button').click(function () {
        /*
            参数
                url：异步请求的地址
                data：异步请求的数据
                callback：异步请求成功后的回到函数
                    返回值：服务器端的响应结果，并会自动的把响应结果写入到目标元素中
        */
        $('button').load('server.txt', function () {
            console.log('异步请求成功')
        })
    })
</script>

</html>

$.get()方法与 $.post()方法

$.get()方法使用get方式向服务器端发送异步请求
$.post()方法使用POST方式向服务器端发送异步请求

结构如下：

$.get(url,[callback],[type])
$.post(url,[callback],[type])

url:请求HTML页面的url地址
data：发送给服务器端的key/value形式的数据内容
callback：Ajax请求完成时的回调函数
type：设置返回数据内容的格式。值为xml，html，script， json和_default
返回值：服务器响应的结果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>get()与post()方法</title>
</head>

<body>
    <button>按钮</button>
</body>
<script src="./jquery-3.5.1.js"></script>
<script>
    $('button').click(function () {
        /*
        url：异步请求的地址
        data：异步请求的数据
        callback：异步请求成功后的回到函数
        */
        $.get('server.json', {
            name: "小明"
        }, function (response) {
            console.log(response)
        }, 'json')


        $.post('server.json', {
            name: "张无忌"
        }, function (response) {
            console.log(response);
        }, 'json')
    })
</script>

</html>

$.ajax()方法

$.ajax(url,[settings])

url：请求HTML页面的url地址
settings：key/value形式的请求设置，所有参数都是可选的
- settings选项：对象类型
  - type ：设置请求方式
  - data ：发送给服务器端的请求数据
  - dataType ：服务器端响应结果的格式
  - success ：异步请求成功后的回调函数
    - function(data,textStatus,jqXHR){}
      - data ：表示服务器端响应的结果
      - textStatus ：表示服务器端当前的状态
      - jqXHR ：Ajax中的核心对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax()方法</title>
</head>

<body>
    <button>按钮</button>
</body>
<script src="./jquery-3.5.1.js"></script>
<script>
    $('button').click(function () {
        /*
        $.ajax(url,[settings])
            url：请求地址
            settings：设置请求的参数 settings是个对象类型的
                type:设置请求方法
                data：发送给服务器端的数据
                dataType：服务器端响应结果的格式
                success：异步请求成功后的回调函数
                    function(data,textStatus,jqXHR){}
                        data：表示服务器端响应的结果
                        textStatus：表示服务器端当前的状态
                        jqXHR：Ajax中的核心对象
        */
        $.ajax('server.json', {
            type: 'get',
            dataType: 'text',
            success: function (data) {
                console.log(data);
            }
        })
    })
</script>

</html>

$.getScript()方法

$.getScript()方法是JQuery中用于动态加载指定JavaScript文件的，结构如下：

$.getScript(url,[callback]);

url：请求JavaScript文件的url地址
callback：指定JavaScript文件加载成功后的回调函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>getScript()方法</title>
</head>

<body>
    <button>按钮</button>
</body>
<script src="./jquery-3.5.1.js"></script>
<script>
    // 动态加载指定JavaScript文件，并且执行
    $.getScript('server1.js', function (data) {
        console.log("加载成功")
        console.log(data);
    })
</script>

</html>

$.get.JSON()方法

$.getJSON(url,[data],[callback]);

url:请求JSON文件的url地址
data：发送给服务器端的ke/value形式的数据内容
callback：指定JSON文件加载后的回调函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>getScript()方法</title>
</head>

<body>
    <button>按钮</button>
</body>
<script src="./jquery-3.5.1.js"></script>
<script>
    // getJSON（）方法的请求方式为GET
    $.getJSON('server.json', {
        name: "张无忌"
    }, function (data) {
        console.log(data)
    })
</script>

</html>