JQuery中的Ajax

最新推荐文章于 2024-03-13 07:00:00 发布

XUPT-前端在逃工程师

最新推荐文章于 2024-03-13 07:00:00 发布

阅读量116

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/Dimuzero/article/details/114550128

版权

JQuery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一. JQ中的Ajax

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

该方法通过get请求载入信息 (显示提交)

url:等载入页面的url地址
data:待发送key:value参数
callback:载入成功时回调函数
type:返回内容格式(xml,html,script,json,text)

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

该方法通过post请求载入信息 (隐式提交)

url:等载入页面的url地址
data:待发送key:value参数
callback:载入成功时回调函数
type:返回内容格式(xml,html,script,json,text)

3.$.ajax({})

$.ajax({

url:url地址
data:待发送数据
dataType:待发送数据类型
jsonCallback:jsonp解决跨域问题(string)
success:fn(res) 服务器相应成功
error:服务器相应失败
statusCode:响应码(响应状态是404)
xhr: fn() 返回一个XXMLHttpRequest对象
beforeSend(xhr):{
ajax发送之前设置请求头,接口验证(AJAX拦截器)
xhr.setRequestHearder(’’,’’)
return true

}
async:true/false(异步同步)

})

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

该方法只能返回或接收json数据

url:等待载入页面的url地址
data:等待发送的数据
callback:回调函数

5.$.getScript(url,[callback])

该方法只能调用同域Javascript文件

url:等待载入页面的url地址
callback:回调函数

二.Ajax事件

1.ajaxComplete(callback)

ajax请求完成之后执行的事件

2.ajaxErrir(callbback)

ajax请求失败执行的事件

3.ajaxSend(callback)

ajax请求之前执行的事件

4.ajaxStart(callback)

ajax开始请求执行的事件

5.ajaxStop(callback)

ajax请求结束执行的事件

6.ajaxSuccess(callbakc)

ajax请求成功执行的事件

三.JQuery中AJAX多次执行问题

关于AJAX多次执行的问题:主要是在动态创建DOM元素时绑定事件是会发生
每次动态创建DOM元素绑定事件是已经存在的DOM元素就会再一次绑定,就造成了执行事件时AJAX多次执行

1.unbind()解绑事件*推荐使用

<!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>Document</title>
    <script src='./js/jquery-1.9.1.js'></script>
    <style>
        .btn {
            display: block;
        }
    </style>
</head>
<body>
    <div id="box">
        <input type="button" value='新建一个按钮' name="" id="btn">
    </div>
    <script>
        $(function() {
            $('#btn').click(function() {
                var btn = $('<button class="btn">按钮</button>')
                $('#box').append(btn)
                    // 方案1.解绑事件
                $('.btn').unbind("click").click(function() {
                    console.log(1);
                })

            })
        })
    </script>
</body>
</html>

2.ajaxPrefilter过滤器

<!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>Document</title>
    <script src='./js/jquery-1.9.1.js'></script>
    <style>
        .btn {
            display: block;
        }
    </style>
</head>

<body>
    <div id="box">
        <input type="button" value='新建一个按钮' name="" id="btn">
    </div>
    <script>
        $(function() {
            $('#btn').click(function() {
                var btn = $('<button class="btn">按钮</button>')
                $('#box').append(btn)

                //方案2.ajaxPrefilter
                $('.btn').click(function() {
                    var countajax = {}
                    $.ajaxPrefilter(function(options, originalOptions, jqxhr) {
                        if (!countajax[options.url]) {
                            countajax[options.url] = jqxhr
                        } else {
                            countajax[options.url].abort()
                        }
                    })
                    $.ajax({
                        method: 'post',
                        url: 'http://127.0.0.1:3000/find',
                        success: function(res) {
                            console.log(1);
                            // console.log(res);
                        }
                    })
                })
            })
        })
    </script>
</body>
</html>