ajax实现多级下拉列表选择(flask)

最新推荐文章于 2024-07-12 20:49:16 发布

it_chang

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量903

点赞数

分类专栏： HTML Python 文章标签： html ajax

本文链接：https://blog.csdn.net/it_chang/article/details/109288982

版权

本文通过实例代码介绍了如何利用Ajax与Flask配合，实现在HTML页面中多级下拉列表的选择功能。分别展示了ajax.js、index.html和app.py中的关键实现代码，帮助理解Ajax在动态交互中的应用。

摘要由CSDN通过智能技术生成

ajax实现多级下拉列表选择

ajax.js

function ajax (options){
   
    var defaults = {
   
        type: "get",
        url: "",
        async: true,
        data: {
   },
        header: {
   
            "Content-Type": "application/x-www-form-urlencoded"
        },
        success: function () {
   },
        error: function () {
   },
    }
    Object.assign(defaults, options);
    var xhr = new XMLHttpRequest();
    xhr.open(defaults.type, defaults.url);
    if (defaults.type == 'get') {
   
        for (i in defaults.data){
   
            params = i + i.value + "&"
        }
        params = params.substring(0, params.length - 1)
        defaults.url = defaults.url + '?' + params;
    }
    if (defaults.type == 'post') {
   
        var contentType = defaults.header['Content-Type']
        xhr.setRequestHeader('Content-Type', contentType);
        if (contentType == 'application.json') {
   
            xhr.send(JSON.stringify(defaults.data));
        }
        else{
   
            xhr.send(defaults.data);
        }
    }
    else {
   
        xhr.send();
    }
    xhr.onload = function () {
   
        var contentType = xhr.getResponseHeader('Content-Type');
        var responseText = xhr.responseText;
        if (contentType.includes('application/json')) {
   
            responseText = JSON.parse(responseText);
        }
        if (xhr.status == 200){
   
            defaults.success(responseText, xhr);
        }
        else{
   
            defaults.error(responseText, xhr);
        }
    }
}