前端form表单提交后会直接刷新页面的问题解决_form提交后刷新网页

项目场景：

使用LayUI的form.on(‘submit(btn_query)’, function (data) { })方法，监听Form表单的提交按钮，在提交时执行自定义的查询操作。

---

问题描述

本来提交后，使用return false限制表单提交，只是执行查询的代码逻辑，但是出现了当后端查询不到数据时，页面会直接刷新，无法弹出提示框。

    //搜索按钮事件
    form.on('submit(btn_query)', function (data) {
            var msisdn = $("#msisdn").val().trim();
            if (isNull(msisdn)) {
                layer.msg('请输入加密手机号!', {skin: 'coms-skin01', time: 2000});
                return;
            }
            var loadIndex = layer.msg('加载中...', {icon: 16, skin: 'coms-skin01', shade: 0, time: 0});
            // 先查询表格
            initTableData();
            // 清除地图画布
            cleanMap();
            // 查询主要人员轨迹
            let locations = getPeopleLocation(msisdn);
            layer.close(loadIndex);
            // 如果轨迹不为空，则展示轨迹
            if (locations && locations.length != 0) {
                let latLngs = getPathLatLngs(locations);
                // 准备轨迹回放
                readTrackRunning(latLngs, msisdn, blueRunPeopleIcon);
                // 开始轨迹回放
                startMove(getMoveMarker(msisdn),getMoveLine(msisdn),speedAll);
            }
            return false;
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

---

原因分析：

经过问题定位，发现原因是当查询不到数据时，前端代码块会报undefine错误，当报错后就走不到return false代码块了，表单直接默认提交，所以页面会直接刷新。

---

解决方案：

使用前端的try catch，将错误信息进行捕获（和Java后端一样），然后进行对应的处理。

    //搜索按钮事件
    form.on('submit(btn_query)', function (data) {
        try {
            var msisdn = $("#msisdn").val().trim();
            if (isNull(msisdn)) {
                layer.msg('请输入加密手机号!', {skin: 'coms-skin01', time: 2000});
                return;
            }
            var loadIndex = layer.msg('加载中...', {icon: 16, skin: 'coms-skin01', shade: 0, time: 0});
            // 先查询表格
            initTableData();
            // 清除地图画布
            cleanMap();
            // 查询主要人员轨迹
            let locations = getPeopleLocation(msisdn);
            layer.close(loadIndex);
            // 如果轨迹不为空，则展示轨迹
            if (locations && locations.length != 0) {
                let latLngs = getPathLatLngs(locations);
                // 准备轨迹回放
                readTrackRunning(latLngs, msisdn, blueRunPeopleIcon);
                // 开始轨迹回放
                startMove(getMoveMarker(msisdn),getMoveLine(msisdn),speedAll);
            }
        } catch (err) {
            // 只有try抛出错误这里才会执行
            console.error(err.message); // Hello world
            layer.msg(err.message, {skin: 'coms-skin01', time: 2000});
        } finally {
            return false;
        }
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

问题总结：

由于定位问题时，页面会直接刷新，所以看不到控制台的错误信息；
所以我使用了浏览器的debug，看走到哪一步时页面进行了刷新；
然后将对应参数打印出来，发现是惨数为空时，再往下走就刷新页面；
然后我把报错的所有代码删掉，执行时始终都不会刷新页面；
最终发现，是因为报错导致走不到return false才刷新的页面，问题定位到了，就找到办法解决了。

帮助同事解决的问题，记录解决思路和解决方法，与大家分享~~
记得三连哦~