jQuery中的Ajax

最新推荐文章于 2024-03-02 11:28:57 发布

不苒

最新推荐文章于 2024-03-02 11:28:57 发布

阅读量203

点赞数 1

分类专栏： Ajax随笔文章标签： ajax jquery

本文链接：https://blog.csdn.net/qq_49002903/article/details/109709941

版权

Ajax随笔专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jQuery中的Ajax

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

+load()方法

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

jQuery除了封装六个Ajax操作的方法，还提供了以下几种事件：

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

1、 `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 id="btn">按钮</button>
<script src="../js/jquery-1.12.4.js"></script>
<script>
    $('#btn').click(function(){
        /* 
                    load(url,data,callback)方法
                    * 参数
                        * url - 异步请求的地址
                        * data - 异步请求的数据
                            * 如果省略请求数据的话，当前的请求方式为GET
                            * 如果发送请求数据的话，当前的请求方式为POST
                        * callback - 异步请求成功后的回调函数
                    * 返回值 - 服务器端的响应结果
                    * 注意 - 自动将返回结果写入到目标元素中
          */
            $('#btn').load('server.json',{name:'猪猪侠'},function(){
            console.log('异步请求成功...');
        })
    });
</script>
</body>
</html>

2、 `$.get()`方法和`$.post()`方法

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

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

其语法结构如下：

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

参数如下：

url：请求HTML页面的url地址。
data：发送给服务器端的key/value形式的数据内容
callback：Ajax请求完成时的回调函数。
type：设置返回数据内容的格式。值为xml、html、script、json、text和_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 id="btn">按钮</button>
    <script src="../js/jquery-1.12.4.js"></script>
    <script>
        $('#btn').click(function () {
            /* 
                    get(url,data,callback，type)方法
                    post(url,data,callback，type)方法
                    * 参数
                        * url - 异步请求的地址
                        * data - 异步请求的数据
                        * callback - 异步请求成功后的回调函数
                        function(reponse){}
                        * type - 设置服务器端的响应结果格式
                            * 可以为xml、html、script、json、text等
             */
            $.get('server.json', {
                name: '猪猪侠'
            }, function (response) {
                console.log(response);
            });
        });
    </script>
</body>
</html>

3、 `$.ajax()`方法

$.ajax()方法是jQuery中最为底层的Ajax方法，其语法结构如下：

$.ajax(url,[settings]);

url : 请求HTML页面的url地址。
settings : key/value形式的请求设置，所有参数都是可选的。

示例代码如下：

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

4、`$.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 id="btn">按钮</button>
    <script src="../js/jquery-1.12.4.js"></script>
</body>
<script>
    $('#btn').click(function () {

        $.getScript('../code/server2.js', function () {
            console.log('你成功了！')
        })
    })
</script>
</html>

5、`$.getJSON()`方法

$.getJSON()方法是jQuery中用于动态加载指定JSON格式的数据内容，其语法结构如下：

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

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

示例代码如下：

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

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

<body>
    <button id="btn">按钮</button>
    <script src="../js/jquery-1.12.4.js"></script>
</body>
<script>
    $('#btn').click(function () {

        $.getJSON('../code/server1.json', {name:'猪猪侠'},function (data) {
            console.log(data);
        })
    })
</script>

</html>

不苒

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery中的Ajax

jQuery中的AjaxjQuery不仅对JavaScript语言进行了封装，也对Ajax异步交互进行了封装，也对Ajax异步交互进行了封装。jQuery提供了六个Ajax操作的方法。+load()方法$.get()方法 $.post()方法$.ajax()方法$.getScript()方法和$.getJSON()方法jQuery除了封装六个Ajax操作的方法，还提供了以下几种事件：ajaxStart()和ajaxStop()事件ajaxComplete()事件、ajaxSend()
复制链接

扫一扫