jQuery实现form表单基于ajax无刷新提交方法

一级标题

jQuery实现form表单基于ajax无刷新提交方法:

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>


        <form id="form" onsubmit="return false" action="##" method="post">     
            <p class="title">user name</p>
            <input type="text" autofocus="autofocus" name="username" class="input" id="Username" placeholder="Enter Username"><br>
            <p class="title">Password</p>
            <input type="password" class="input" id="Password" name="password" placeholder="Enter Password"><br>
            <input type="button" class="submit" value="login" onclick="login()">
            //错误提示
            <div style="margin-top: 20px;margin-left: 30px;color: red;height: 5px" id="msg_test">
            </div>
        </form>        

<script>
    function login(){
        $.ajax({
            type: "POST", 
            dataType: "json", 
            url: "./login.php" , 
            data: $('#form').serialize(),
            success: function (data) {
                if (data.status == 200) {
                    //根据返回值进行跳转
                    location.href = data.url;
                }else{
                    //提示层
                   document.getElementById('msg_tests').innerHTML =　data.msg;
                }
            },
        });
    
    }
</script>

后端 PHP语言 Laravel框架演示返回信息：

     $tab = Orders::find($order_id);
     $tab->demo = $request->input('demo','');
     if($tab->save()){ 
            $data = ['msg' => '修改成功', 'status' => '200'];
            return $data;
        }else{
            $data = ['msg' => '修改失败', 'status' => '400'];
            return $data;
        }