The problem that the page will refresh automatically after clicking the submit button on the form is solved

First , All we have to do is , Click on button The button cannot let form Submit yourself , So here it is form Add one more onsubmit event , It is forbidden to submit .

<form onsubmit="return false">

So the way of submission , Just through js perhaps jq To complete , I used it here jQuery

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

Submit completed , Restore to default format with

if (data.status == 0) {
    
  //  Input succeeded 
    $("input:eq(0)").val("");
    $("input:eq(1)").val(" SF EXPRESS ");
    $("input:eq(2)").val("");
    $("input:eq(3)").val("");
    layer.alert(" Input succeeded ");
} else {
    
    //  Entry failed 
    layer.alert(" Entry failed ");
}

Here is the complete code , You can have a look at what you want to see

This is form Forms

<form id="form" class="layui-form layui-card-body" onsubmit="return false">
                <div class="layui-form-item">
                    <label class="layui-form-label"> Odd Numbers </label>
                    <div class="layui-input-block">
                        <input type="text" name="code" required lay-verify="required" placeholder=" Please input the express number " autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"> Courier Services Company </label>
                    <div class="layui-input-block">
                        <select name="company" lay-verify="" lay-search>
                            <option> China Post </option>
                            <option> Chile post </option>
                            <option> Medium speed express </option>
                        </select>

                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"> Recipient's name </label>
                    <div class="layui-input-block">
                        <input type="text" name="username" required lay-verify="required" placeholder=" Please enter the name of the consignee " autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"> Phone number </label>
                    <div class="layui-input-block">
                        <input type="text" name="phonenumber" required lay-verify="required" placeholder=" Please enter your mobile number " 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" > Submit... Immediately </button>                       </button>
                        <button type="reset" class="layui-btn layui-btn-primary"> Reset </button>
                    </div>
                </div>
            </form>

jQuery + ajax

This is 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) {
    
                //  Close the prompt first   Loading 
                layer.close(loadId);
                // layer.alert(data);

                if (data.status == 0) {
    
                    //  Input succeeded 
                    $("input:eq(0)").val("");
                    $("input:eq(1)").val(" SF EXPRESS ");
                    $("input:eq(2)").val("");
                    $("input:eq(3)").val("");
                    layer.alert(" Input succeeded ");
                } else {
    
                    //  Entry failed 
                    layer.alert(" Entry failed ");
                }
            });
        });
    })
</script>