前端实现Excel表格数据导入和提交功能(二)

原创
10/10 15:27
阅读数 139

增加提交功能(以jQuery的ajax方法为例)

准备工作

完成上一部分代码的编写,并保证能够实现与所示相同的效果。

修改脚本

修改上一部分所示代码中的readExcelFromLocalFile方法中的for循环代码片段。

本文提供三种提交事务的设计思路:

思路一

在for循环前创建一个数组对象,遍历解析数据时,每一次遍历将解析数据封装成对象,并添加至数组中。表格数据全部解析完成后,使用JSON.stringify()方法将之前创建的数组对象编译成JSON字符串,并用jQuery封装好的ajax方法提交该JSON字符串。

优点:只需要进行一次提交,启用线程少,对客户端负担较轻;

缺点:所有数据一次性提交,加大了单次请求的数据量,延长了请求时间。一但数据量过大或网络不佳时,就极容易出现请求超时或失败的情况;

建议:不推荐该思路,但对于表格数据量较少的情况,该思路也具有一定优势。

思路二

在遍历时就进行ajax请求,每一次遍历都调用一次ajax方法将本次的解析结果进行封装和请求。

优点:将大量数据拆分为一条一条数据进行提交,减小了网络压力并调高了提交成功率;

缺点:需要处理大量响应回调,相较于思路一对客户端负担较重;

建议:推荐该思路,无需担心用户一次性提交大量数据。

思路二代码示例:

// 遍历有效数据行
for (let i = HEAD_LEN + 1; i <= refArr[4]; i++) {
    try{
        let item = {
            id: sheet['A' + i].v, // 序号
            name: sheet['B' + i].v, // 姓名
            gender: sheet['C' + i].v, // 性别
            age: sheet['D' + i].v, // 年龄
            phone: sheet['E' + i].v // 联系方式
        };
        /**
       	 * 新增代码
       	 */
        // 提交数据
        $.ajax({
            url: 'localhost:22911/showproject/uploadExcelData', // 后端提供的请求地址
            type: 'post',
            data: JSON.stringify(item),
            dataType: 'json',
            contentType: 'application/json;charset=utf-8',
            success: function(res) {
                console.log('提交成功!');
            },
            error: function() {
                console.log('提交失败!');
            }
        });
        datas.push(item);
    }catch(e){
        console.log("解析遇到单元格为空!第【" + i + "】行数据解析失败!");
    }
}

思路三

将思路一和思路二进行整合使用,通过判断数据表格中的有效数据行数,进行情况分类。对于有效数据行数较多的Excel表格,采用思路二的方法进行提交;而对于有效数据行数较少的Excel表格,采用思路一的方法进行提交。

注:数据表格中的有效数据行数包含在之前所示代码中变量refArr的索引值为4的元素中,该数值同时也包含了表头行数,因此使用时可能需要对数值进行处理。

优点:兼具思路一和思路二的优势;

缺点:代码量增加,延长网页加载时间。

建议:我实际测试时感觉该思路的优点和缺点都不是特别明显,但代码量确实是实实在在的增加了,因此没有将其选择首推思路。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部