关于form表单点击submit按钮后，页面自动刷新的问题解决_form提交后刷新网页

首先，就是要做的就是，点击 button 按钮不能让 form 自己提交，所以给form增加一个onsubmit 事件，禁止提交。

<form onsubmit="return false">
1

那么提交的方式，就通过js 或者jq 去完成，我这里用的jQuery

	$(function () {
		$("#form").submit(function () {});
	});
1
2
3

提交完成，用恢复成默认格式

if (data.status == 0) {
  // 录入成功
    $("input:eq(0)").val("");
    $("input:eq(1)").val("顺丰速运");
    $("input:eq(2)").val("");
    $("input:eq(3)").val("");
    layer.alert("录入成功");
} else {
    // 录入失败
    layer.alert("录入失败");
}
1
2
3
4
5
6
7
8
9
10
11

下面是完整的代码，想看的可以看一下

这个是form 表单

<form id="form" class="layui-form layui-card-body" onsubmit="return false">
                <div class="layui-form-item">
                    <label class="layui-form-label">单号</label>
                    <div class="layui-input-block">
                        <input type="text" name="code" required lay-verify="required" placeholder="请输入快递单号"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">快递公司</label>
                    <div class="layui-input-block">
                        <select name="company" lay-verify="" lay-search>
                            <option>中国邮政</option>
                            <option>智利邮政</option>
                            <option>中速快递</option>
                        </select>

                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">收件人姓名</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" required lay-verify="required" placeholder="请输入收货人姓名"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">手机号码</label>
                    <div class="layui-input-block">
                        <input type="text" name="phonenumber" required lay-verify="required" placeholder="请输入手机号码"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn layui-btn-blue" >立即提交</button>                       </button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
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
33
34
35
36
37
38
39
40

jQuery + ajax

这个是 jQuery + ajax

<script>
    $(function () {
        $("#form").submit(function () {
            var loadId = layer.load();
            var number = $("input:eq(0)").val();
            var company = $("input:eq(1)").val();
            var username = $("input:eq(2)").val();
            var userPhone = $("input:eq(3)").val();

            $.post("/express/insert.do", {
                number: number,
                company: company,
                username: username,
                userPhone: userPhone
            }, function (data) {
                // 先关提示信息     加载中
                layer.close(loadId);
                // layer.alert(data);

                if (data.status == 0) {
                    // 录入成功
                    $("input:eq(0)").val("");
                    $("input:eq(1)").val("顺丰速运");
                    $("input:eq(2)").val("");
                    $("input:eq(3)").val("");
                    layer.alert("录入成功");
                } else {
                    // 录入失败
                    layer.alert("录入失败");
                }
            });
        });
    })
</script>
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
33
34