个人中心
gpt4 book ai didi

javascript - 在JS中生成csv并使用ajax请求POST将其发送到flask

转载 作者：行者123 更新时间：2023-12-02 22:34:00 32 4
gpt4 key购买 nike

我正在尝试使用我的代码 table2csv 在 JS 中创建 CSV 文件。然后我想使用ajax请求将其发送到flask并再次将其返回给客户端。

但是当我尝试将文件发送到服务器时，它返回 ajax 找不到我的文件的错误。

我使用 console.log 来检查我的文件是否已创建，确实如此。我陷入困境，不知道该怎么办了，因为我对 ajax 请求还很陌生，所以任何帮助都会很棒。

这是我的 JS 部分以及我目前正在做的事情:

//On Update click renders table to csv, activates the be_filter and reopens it in the filtered_file.html
var isClicked;
jQuery("#update").on('click', function(){
    var response = confirm('Are you sure you want to UPDATE rows ?');
    if(response == true){
        isClicked = $('#my_id').table2csv();
        $.ajax({
            type:'POST',
            url:"{{url_for('update_file')}}",
            data: {'data': isClicked},
            success: function(result){
                console.log(result);
            },
            error: function(error){
                console.log(JSON.stringify(error));
            }
        });event.preventDefault();
         //window.location.href='/update_file';
    }else{
        return false;
    }
});

flask 调用:

@app.route('/update_file', methods=['GET', 'POST'])
@login_required
def update_file():
    '''Opens the filtered_file page but with updated file'''
    clicked = None
    if request.method == 'POST':
        clicked = request.form['data']
        file_to_filter = pd.read_csv(clicked, sep=';', engine='python', encoding='utf_8_sig')
        table1 = update_csv(file_to_filter)
        table2 = table1.to_html(classes='my_class" id = "my_id')
        return render_template('3_filtered_file.html', data=table2)

编辑: console.log() 获取错误消息:

POST http://127.0.0.1:5000/update_file 500 (INTERNAL SERVER ERROR)


{"readyState":4,"responseText":"<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n  \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n  <head>\n    <title>FileNotFoundError: [Errno 2] No such file or directory: '&quot;Auftragsdatum&quot;,&quot;OrderNo&quot;,&quot;ReferenceOrder&quot;,&quot;Pos&quot;,&quot;Quantity&quot;,&quot;ArtNo&quot;,&quot;ManufactureNo&quot;,&quot;ProductName&quot;,&quot;ReferencePosition&quot;,&quot;NetPerPiece&quot;,&quot;InvoiceNo&quot;,&quot;DeliveryNoteNo&quot;,&quot;SerialNumbers&quot;,&quot;Manufacturer&quot;,&quot;CI&quot;,&quot;Type&quot;,&quot;Import_ID&quot;,&quot;State&quot;,&quot;Supplier&quot;,&quot;NetPerPieceSale&quot;,&quot;OU&quot;,&quot;Modified_Date&quot;,&quot;Added_by&quot;,&quot;Modified_by&quot;,&quot;isSupplier&quot;,&quot;isManufacturer&quot;\\n&quot;01.04.2019&quot;,&quot;7027856072&quot;,&quot;a&quot;,&quot;100&quot;,&quot;1&quot;,&quot;2099882&quot;,&quot;GS1900-24HP-EU0101F&quot;,&quot;ZYXEL GS1900-24HP 24P GbE L2 PoE Switch&quot;,&quot;CLINO&quot;,&quot;251,09&quot;,&quot;950347427&quot;,&quot;6054042579&quot;,&quot;S182L37002129&quot;,&quot;ZYXEL&quot;,&quot;sel&quot;,&quot;&quot;,&quot;&quot;,&quot;716&quot;,&quot;ALSO&quot;,&quot;&quot;,&quot;OU00100&quot;,&quot;11-11-2019 09:58&quot;,&quot;admin&quot;,&quot;&quot;,&quot;&quot;,&quot;BPT07939&quot;\\n&quot;01.04.2019&quot;,&quot;7027856072&quot;,&quot;bg&quot;,&quot;200&quot;,&quot;1&quot;,&quot;3074862&quot;,&quot;EAP225 V3&quot;,&quot;TP-LINK AC1350 WLAN Dual Band Gigabit AP&quot;,&quot;CLINO&quot;,&quot;64,56&quot;,&quot;950347427&quot;,&quot;6054042579&quot;,&quot;218B410001725&quot;,&quot;TP-LINK&quot;,&quot;sel&quot;,&quot;&quot;,&quot;&quot;,&quot;716&quot;,&quot;ALSO&quot;,&quot;&quot;,&quot;OU00100&quot;,&quot;11-11-2019 09:58&quot;,&quot;admin&quot;,&quot;&quot;,&quot;&quot;,&quot;BPT07134&quot;\\n&quot;01.04.2019&quot;,&quot;7027856072&quot;,&quot;cd&quot;,&quot;300&quot;,&quot;1&quot;,&quot;7003581&quot;,&quot;&quot;,&quot;Mautgebühr&quot;,&quot;nan&quot;,&quot;2,09&quot;,&quot;950347427&quot;,&quot;6054042579&quot;,&quot;&quot;,&quot;&quot;,&quot;sel&quot;,&quot;&quot;,&quot;&quot;,&quot;716&quot;,&quot;ALSO&quot;,&quot;&quot;,&quot;sel&quot;,&quot;11-11-2019 ...

编辑 2 ** 这是我的 **table2csv 代码:

(function ($) {
const _trim_text = (text) => {
    return text.trim();
};
const _quote_text = (text) => {
    return '"' + text + '"';
};

function convert(tb){
    let output = "";
    let lines = [];

    $(tb).find('thead>tr').each(function () {
        let line = [];
        $(this).find('th:not(th:eq(0))').each(function () { 
            line.push(_quote_text(_trim_text($(this).text())));
        });
        lines.push(line.splice(0).toString());
    })

    $(tb).find('tbody>tr').each(function () {
        let line = [];
        $(this).find('td').each(function () {   
            if($(this).find('select').length){
                line.push(_quote_text($(this).find('option:selected').val()));
            }else if($(this).find('input').length){
                line.push(_quote_text($(this).find('input').val()));
            }
            else
            line.push(_quote_text(_trim_text($(this).text())));
        });
        lines.push(line.splice(0).toString());
    })
    output = lines.join('\n');
    return output;
};

$.fn.table2csv =  function () {
    let csv = convert(this);
    //cases = $('#out').append($("<pre>").text(csv));   
    return csv;
};

})(jQuery);

最佳答案

看来你是一些将表数据转换为 csv 的 jQuery 插件。它实际上并不在您的磁盘上创建文件。当您向服务器发出 ajax POST 请求时，您正在发送表单数据。在服务器端，您有 clicked = request.form['data'] 这里单击的不是文件。但是您的 pandas read_csv 需要 url 或缓冲区类型。您可以使用 StringIO 解决此问题。

@app.route('/update_file', methods=['GET', 'POST'])
@login_required
def update_file():
    '''Opens the filtered_file page but with updated file'''
    clicked = None
    if request.method == 'POST':
        clicked = StringIO(request.form['data'])
        file_to_filter = pd.read_csv(clicked, sep=';', engine='python', encoding='utf_8_sig')
        table1 = update_csv(file_to_filter)
        table2 = table1.to_html(classes='my_class" id = "my_id')
        return render_template('3_filtered_file.html', data=table2)

关于javascript - 在JS中生成csv并使用ajax请求POST将其发送到flask，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58798806/

32 4 0
文章推荐： javascript - 错误 TypeError : Cannot read property '1' of null at Object. eval [作为 updateDirectives]
文章推荐： javascript - react 动画组件包的问题
文章推荐： matrix - 使用 d3.js 生成类似矩阵的图形
文章推荐： .net - DateTime 的 WebApi 序列化 - 如何反序列化？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com