Flask中ajax的使用

内容概述：Aja x的原理，ajax 函数讲解，快捷函数 post,get,g e tJson,ajax的全局设置

异步请求是客户端发出请求消息后，不等待服务器的响应结果，继续执行其他操作。这个要跟同步的概念一起理解，举个同步的例子就是当你浏览页面的时候，你点击一个按钮或者链接，那么这个界面就会向服务器发送请求，此时你眼前的界面就是一片空白，直到请求的数据返回页面上才有东西显示。就是一个操作要等前一个做完才可以开始。而异步则不同，比如一个注册页面你填写名字，密码，邮箱之类的信息，界面看上去什么都没有变化，但是其实你注册的这个界面已经向服务器发送了一个请求来验证你的用户名是否已经存在。就是后台与界面可以进行数据交互，而界面则可以继续保持一直跟用户交互而不受影响。

——由此可以明白aj ax异步请求的好处：在不加载页面的情况下更新页面；页面加载完成后请求/接收数据；在后台向服务器接受数据。简单说就是提高用户体验，减少不断加载数据对用户造成体验上的影响。

2.那么该如何实现 aj ax呢？

步骤一：创建XMLHt t pReque st/Act i v eObje ct 对象（谷歌 chrome 内核的浏览器用前面的对象，微软的浏览器用后面的对象）（XMLHttpReque st 作用：用于在后台与服务器交换数据）
步骤二：注册回调函数
步骤三：配置请求参数
步骤四：发送请求
步骤五：创建回调

3.动手实现 aj ax

第一步先要了解XMLHttpReque st的几种状态

<!DOCTYPE html&gt;
<html lang="en"&gt;
<head&gt;
    <meta charset="UTF-8"&gt;
    <title&gt;Title</title&gt;
</head>
<body>
    <script>
        // 1.创建XMLHttpRequest/ActiveObject对象
        var xmlhttp = null;
        if (window.XMLHttpRequest){
            xmlhttp = new XMLHttpRequest();
        }else if (window.ActiveXObject){
            xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
        }else {
            alert('请用点正常人用的浏览器')
        }
        // 2.注册回调函数
        if (xmlhttp) {
            xmlhttp.onreadystatechange = callback;
            // 3.配置请求参数
            var url = 'https://www.tencent.com'
            // 4.发送请求
            xmlhttp.open('GET', url, true);
            // 设置为null，不用传递任何东西
            xmlhttp.send(null);

            // 5.创建回调
            function callback() {
                if (xmlhttp.readyState === 4) {
                    // 获取http状态码
                    console.log(xmlhttp.status)
                }
            }
        }

    </script>
</body>
</html>

二，jQue ry中的aj ax函数

根据上面的代码可以看出，使用 aj ax过于复杂，我们完全可以使用jQue ry中的ajax函数来简化代码

1. .ajax(options)函数

url——请求地址
method——请求类型
data——请求参数
dataTy pe——返回的数据类型(xml/html/json等)
headers——请求头消息
success——请求成功后的回调
error——发生错误后的回调
co mp lete——请求完成后的回调

2. ajax函数的应用

@app.route('/ajax/jq')
def ajaxjq():
    return render_template('ajaxjs.html')


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在jquery中引入ajax</title>
    <script src="/static/js/jquery-3.4.1.min.js"></script>
</head>
<body>
    <p>jQuery中ajax的使用</p>
    <script>
        $(document).ready(function () {
            $.ajax({
                url: 'http://127.0.0.1:5000/ajax/js',
                method: 'POST',
                success: function (res){
                    console.log(res)
                }
            })
        })
    </script>
</body>
</html>

可以看到，成功调用到

但是在实际生产中，我们不会设置这么简单，而应该是设置点击事件一类的东西，当点击后才进行异步请求。具体做法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在jquery中引入ajax</title>
    <script src="/static/js/jquery-3.4.1.min.js"></script>
</head>
<body>
    <p>jQuery中ajax的使用</p>
    <a href="javascript:;">点击提交</a>
    <script>
        $('a').click(function () {
            $.ajax({
                url: 'http://127.0.0.1:5000/ajax/js',
                method: 'POST',
                success: function (res){
                    console.log(res)
                }
            })
        })
    </script>
</body>
</html>

亲手试试有什么区别哦

3. 最后展示一下这三个回调参数

第一步，先设置状态码为500

$.ajax({
                url: 'http://127.0.0.1:5000/ajax/js',
                method: 'POST',
                success: function (res){
                    console.log(res)
                    alert('成功了')
                },
                error: function () {
                    alert('失败了')
                },
                complete: function () {
                    alert('完成了')
                }
            })