首页 > 解决方案 > 编码 jquery 事件,以便该事件中的函数需要在执行 ajax 之前完成

问题描述

我正在上传一个文件并用 javascript 解析它。解析完成后,我将解析结果上传到服务器。

问题是,在 ajax 启动之前解析没有完成,即使在解析例程上使用 async/await 也是如此。

代码:

$(`[name="Submit"]`).on(`click`, async (e)=> {
    console.log(`getting file`);
    e.stopPropagation();
    e.preventDefault();
    file = $(`[name="one"]`)[0].files[0];
    newData=await parseCSV(file,/\t/);
    console.log(newData)
    return; //let's just end it here for now to see if newData actually has data;
    formData=new FormData();
    formData.append('one', new File([new Blob([newData])], 't.csv'));
    console.log(`launching ajax`);
    return;
    $.ajax({
        url: `taxupl_popup.asp`,
        data: form_data,
        cache: false,
        contentType: false,
        processData: false,
        enctype: `multipart/form-data`,
        type: `POST`,
    }).done(function(data) {
        console.log(`data`, data);
    }).fail(function(xhr, textStatus, errorThrown) {
        console.log(xhr, textStatus, errorThrown);
    }).always(function() {
        //clearInterval(updateStatusTimer);
    });
});

async function parseCSV(file, delim) {
    let retString;
    let validStates=[`AA`]; //,`AL`,`CA`,`WA`,`CO`,`IL`,`LA`,`MI`,`NV`,`OH`,`OK`,`TN`,`TX`];
    var regexReplace = new RegExp(delim, "g");
    console.log(`reading file`);
    var reader = new FileReader();
    reader.onload = function(e) {
        var rows = e.target.result.split("\r\n");
        const rowCount=rows.length;
        //console.log(`rows:`, rowCount);
        let curRow=-1;
        rows.some(function(r) {
            curRow++;
            if (validStates.indexOf(r.split(delim)[1])>-1||curRow===0) {
                retString+=(r.replace(regexReplace,`,`)+`\r\n`);
            }
            if (curRow===100||curRow===rowCount) {
                console.log(`got our data`);
                return true;
            }
        });
    };
    
    return new Promise(function(resolve, reject) {
        reader.readAsText(file);
        resolve(retString);
    });
}

标签: javascriptjqueryasynchronousasync-await

解决方案


推荐阅读