jQuery中的Ajax

最新推荐文章于 2024-08-26 17:07:20 发布

gaearon

最新推荐文章于 2024-08-26 17:07:20 发布

阅读量205

点赞数 1

分类专栏： jQuery 文章标签： ajax js javascript jquery

本文链接：https://blog.csdn.net/weixin_45499478/article/details/109713402

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

jQuery 中的 Ajax

jQuery 提供了六个 Ajax 操作的方法：

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

其中 get() 和 post() 是基于 $.ajax() 的封装；
load() 是基于 get() 和 post() 的封装。

jQuery 提供了六个事件：

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

`load()` 方法

load() 方法可以简单的实现异步交互，但是限制颇多。语法结构：

load(url, data, callback)

参数说明：

url：服务器地址
data：请求数据，可忽略
callback：回调函数

load 方法发送的请求，当 data 被忽略时为 get 请求，若 data 被传入参数为 post 请求。

load 方法有一个缺陷，会将服务端的响应结果赋值给调用 laod 方法的元素的文本属性，如下代码所示：

<body>
<button id="btn">按钮</button>
<script>
    $('#btn').on('click',function (){
        $('#btn').load('sever.json', function (){
            console.log('request win!')
        })
    })
</script>
</body>

结果：

在这里插入图片描述

通过浏览器自带抓包工具，这次请求的方法为 get 方法：

在这里插入图片描述

接下来测试使用 load() 方法时，传入 data ：

$('#btn').on('click',function (){
    $('#btn').load('sever.json',{user: "12345", pwd: "111"}, function (){
        console.log('request win!')
    })
})

请求结果和附带参数：

在这里插入图片描述

当 load 方法有没有忽略 data 形参时，请求为 post。

`get()` 方法

jQuery 提供了一个 get() 方法用来专门发送 get 请求。语法结构：

$.get(url, data, callback, type)

参数说明：

url：设置服务端的请求地址
data：设置发送的是数据
callback：回调函数，该函数有一个 response 参数，其中有服务端响应的数据。
type：指定服务端返回的数据类型；可以为 html、xml、json、script、text 等

type位置的参数在传入时为 String 类型。

在使用 get 方法时，直接使用 $ 调用。

如下代码所示：

<body>
<button>发送</button>
<script>
    $('button').click(function (){
        $.get('sever.json', {user: 'hel'}, function (response){
            console.log("request win!")
            console.log(response)
        });
    })
</script>
</body>

结果：

在这里插入图片描述

在上述代码中，如果将 type 位置的参数写为 script 则接收不到数据。如下所示：

$('button').click(function (){
    $.get('sever.json', {user: 'hel'}, function (response){
        console.log("request win!")
        console.log(response)
    }, 'script');
})

再次点击发送按钮，看不到任何数据，因为服务端返回的数据为 json，这里规定的返回格式为 script。

`post()` 方法

post 方法的语法结构和 get 相同用法也相同，示例代码：

<body>
<button>发送</button>
<script>
    $('button').click(function (){
        $.post('sever.json', {user: 'hel'}, function (response){
            console.log("request win!")
            console.log(response)
        }, 'json');
    })
</script>
</body>

请求结果：

在这里插入图片描述

`ajax()` 方法

ajax() 方法是 jQuery AJAX 的底层。

jQuery API文档中对 ajax() 的解释

利用 $.ajax() 实现简单的小通信，这也是 ajax 方法的最简单用法：

<body>
<button id="btn">发送</button>
<script>
    $('#btn').on('click', function (){
        $.ajax('sever.json',{
            type: 'get',
            success: function (data,textStatus){
                console.log(data)
                console.log(textStatus)
            }
        })
    })
</script>
</body>

需要注意的是，$.ajax 方法中第二个参数在传入的时候为一个对象，该对象内写一些其他的信息。

结果：

在这里插入图片描述

`$.getScript()` 方法

jQuery 的 getScript() 方法可以动态加载 JavaScript 文件，并且加载完成之后立即执行，语法结构如下：

$.getScript(url, callback)

如下代码所示：

<body>
<button id="btn">发送</button>
<script>
    $('#btn').on('click',function (){
        $.getScript('sever.js', function (){
            console.log('yes')
        })
    })
</script>
</body>

结果：

在这里插入图片描述

`getJSON()` 方法

jQuery 提供了 getJSON 方法用来专门使用 get 方法获取 json 数据。
如下代码：

<body>
<script>
    $.getJSON('sever.json',function (){
        console.log('yes')
    })
</script>
</body>

getJSON() 方法一直为 get 请求。

表单异步提交

这里的表单异步提交主要是针对 form 组件中的 submit 按钮，
该按钮的提交方式为同步提交（提交后会刷新页面），需要阻止默认方式，
重新设置为异步提交，如下代码所示：

<body>
<form action="#">
    <input type="text">
    <input type="submit">
</form>
<script>
    $('input[type=submit]').on('click', function (event) {
        event.preventDefault()
        var input_data = $('input[type=text]').val()
        var request_data = 'data=' + input_data
        $.post('sever.json', request_data, function (response){
            console.log(response)
        })
    })
</script>
</body>

结果：

在这里插入图片描述

表单序列化

serialize()：将表单组件对应的值生成对应格式的字符串
serializeArray()：将表单组件对应的值生成 JSON 格式的数据内容

在使用这两个方法时，为 from 中 input 组件设置 name 属性，
否则无法通过序列化方法格式化表单组件中的 value 属性。

如下代码所示：

<body>
<form action="#">
    <input type="text" name="username" id="user">
    <input type="text" name="password" id="pwd">

    <input type="submit">
</form>
<script src="./jquery-1.12.4.js"></script>
<script>
    $('form').on('submit',function (event){
        event.preventDefault()
        var data = $('form').serializeArray();
        console.log(data)
        $.post('sever.json',data, function (response){
            console.log(response)
        })
    })
</script>
</body>

结果：

在这里插入图片描述

gaearon

关注

1
点赞
踩
0

收藏

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

jQuery 中的 AjaxjQuery 提供了六个 Ajax 操作的方法：load()$.get()$.post()$.ajax()$.getScript()$.getJSON()其中 get() 和 post() 是基于 $.ajax() 的封装；load() 是基于 get() 和 post() 的封装。jQuery 提供了六个事件：ajaxStart()ajaxStop()ajaxComplete()ajaxSend()ajaxError()ajaxSucces
复制链接

扫一扫