ajax的使用(一)

后端 Flask、ajax

创建时间:2022-08-22 19:48

阅读:

ajax介绍

1.ajax 是 Asynchronous JavaScript and XML的简写
2.ajax一个前后台配合的技术，它可以让 javascript 发送异步的 http 请求，与后台通信进行数据的获取
3.ajax 最大的优点是实现局部刷新，ajax可以发送http请求，当获取到后台数据的时候更新页面显示数据实现局部刷新
4.在这里大家只需要记住，当前端页面想和后台服务器进行数据交互就可以使用ajax了。

后端代码

import json
from datetime import datetime
from flask import Flask
from flask import request
from flask_cors import CORS

app = Flask(__name__)

# 解决跨域问题
CORS(app, supports_credentials=True)

@app.route("/ajax/data", methods=["post"])
def return_combat_ajax_data():
    value = json.loads(request.get_data())
    now_time = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
    return {"time": now_time, "url": "https://www.baidu.com/"}

if __name__ == '__main__':
    app.run(host="0.0.0.0", port=5000, debug=False)

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./jquery-1.12.4.min.js"></script>
    <script src="./ajax_requests.js"></script>
</head>
<body>
<div style="text-align: center">
    <span>当前时间：</span>
    <span id="current_time"> </span>
</div>

<div style="text-align: center">
    <span>推荐网站：</span>
    <span id="ajax_url"> </span>
</div>

</body>
</html>

js文件 (ajax_requests.js)

window.onload = function () {
    
    // 获取要操作的元素
    let url = document.getElementById("ajax_url");
    let time = document.getElementById("current_time");


    $.ajax({
        url: "http://192.168.255.10:5000/ajax/data",
        type: "POST",
        
        // 发送json格式的数据
        data: JSON.stringify({"a": "b", "c": "2"}),
        
        // 两种方式设置请求头
        // contentType: 'application/json',
        headers:{"Content-Type":"application/json"},
        
        success: function (response) {
            // 通过innerHTML去更新数据
            url.innerHTML = response.url
            time.innerHTML = response.time
        },
        error: function () {
            alert("请求失败")
        }
    })
}

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。