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

且听深林细雨

于 2022-01-14 18:32:26 发布

阅读量7.3k

点赞数 2

分类专栏： Java 学习记笔记文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/qq_43098690/article/details/122499933

版权

笔记同时被 2 个专栏收录

69 篇文章

订阅专栏

Java 学习记

66 篇文章

订阅专栏

本文介绍如何使用jQuery阻止HTML表单自动提交，并通过AJAX实现异步提交数据。文中提供了具体的代码实例，包括如何设置表单onsubmit属性阻止默认提交行为，以及如何使用jQuery和AJAX来发送表单数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<form onsubmit="return false">

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

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

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

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("录入失败");
}

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

这个是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>

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>