Flask中ajax的使用_代码007(未授权)

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

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

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

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

<!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>

@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>

$.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('完成了')
                }
            })