ajax的使用-axios(二)

后端 Flask、ajax、axios

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

阅读:

1.axios和ajax的区别
 2.后端代码
 3.html文件
 4.js文件

axios和ajax的区别

1.axios是通过Promise实现对ajax技术的一种封装，就像jquery对ajax的封装一样，简单来说就是ajax技术实现了局部数据的刷新
2.axios实现了对ajax的封装，axios有的ajax都有，ajax有的axios不一定有，
2.总结一句话就是axios是ajax，ajax不止axios。

后端代码

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():
    return {"data": [1, 2, 3, 4]}

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

html文件

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>axios使用</title>
        <script src="./js/oneself/vue.js"></script>
        <script src="./js/oneself/axios.min.js"></script>
        <script type="text/javascript" src="./js/oneself/ceshi.js"></script>
    
    
    </head>
    <body>
    <span id="vue_value">{{vue}}</span>
    </body>
    </html>

js文件 (ceshi.js)

window.onload = function () {
    let vm = new Vue({
    
        // 绑定操作对象
        el: '#vue_value',

        // 设置值
        data: {
            vue: 1
        },
        
        methods: {

          list1:function() {
                //修改vue值
                this.vue = 3;
                
                let url="http://192.168.255.10:5000/test";
                axios.post(url,{
                    responseType: 'json',
                })
                   .then(response => {
                       // 再次修改vue值
                       this.vue=response.data
                   })
                    .catch(error => {
                        alert(error);
                    })
            }

        },
    });
    
    // 调用函数，让函数执行起来
    let obj =vm.list1();

}

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