html5 ,form表单提交不跳转

form表单是经常用到的一种提交数据的方法，经常用于登录或者注册功能。

可是form表单提交会跳转至提交的链接，这对于前后端分离的项目就有点不太友好。所以说我们需要在表单提交后不跳转，并且获取到接口返回的数据。

可以使用jQuery-form.js这个包。【自行下载】

https://download.csdn.net/download/qq_53790158/85581118

具体操作如下：

首先，引用（用到的jquery语法）

/*引用*/
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script src="jquery-form.js"></script>

    js代码【获取返回数据】

/*获取返回数据*/
/*此处演示的是登录之后，判断密码正确再跳转*/

$(function(){$(".submit").click(function () {
            user_name = $("#user_name").val()
            nickname = $("#nickname").val()
            password = $("#password").val()
            email = $("#email").val()
            password_confirm = $("#password_confirm").val()
            if (password != password_confirm){
                alert("两次密码不一致！")
                return
            }
            /*submit之后，获取数据*/
            $("form").ajaxSubmit(function (data) {

                console.log("chenggong")
                if (JSON.parse(data).code == 200){     
                    window.location.href = "login.html"    /*页面跳转*/
                }
                if (JSON.parse(data).code == 500){
                    alert(JSON.parse(data).message)
                }
            });
            })
            
        });

以是表单html代码：

<form id="register_form" method="post" action="http://127.0.0.1:5000/register">
                <dl>
                    <dt>用户名</dt>
                    <dd style="min-height:54px;">
                        <input type="text" id="nickname" name="nickname" class="text tip" title="3-20位字符，可由中文、英文、数字及“_”、“-”组成" />
                        <label></label></dd>
                </dl>
                <dl>
                    <dt>昵称</dt>
                    <dd style="min-height:54px;">
                        <input type="text" id="user_name" name="user_name" class="text tip" title="3-20位字符，可由英文、数字及“_”、“-”组成" />
                        <label></label></dd>
                </dl>
                <dl>
                    <dt>设置密码</dt>
                    <dd style="min-height:54px;">
                        <input type="password" id="password" name="password" class="text tip" title="6-16位字符，可由英文、数字及标点符号组成" />
                        <label></label></dd>
                </dl>
                <dl>
                    <dt>确认密码</dt>
                    <dd style="min-height:54px;">
                        <input type="password" id="password_confirm" name="password_confirm" class="text tip" title="请再次输入您的密码" />
                        <label></label></dd>
                </dl>
                <dl>
                    <dt>邮箱</dt>
                    <dd style="min-height:54px;">
                        <input type="text" id="email" name="email" class="text tip" title="请输入常用的邮箱，将用来找回密码、接受订单通知等" />
                        <label></label></dd>
                </dl>

                <dl>
                    <dd>
                        <input type="button" name="Submit" value="立即注册" class="submit fl" title="立即注册" />
                        <input name="agree" type="checkbox" class="fl mt10 ml10" id="clause" value="1" checked="checked" />
                        <span for="clause" class="fl ml5">阅读并同意<a href="#" target="_blank" class="agreement" title="阅读并同意">服务协议</a></span>
                        <label></label></dd>
                </dl>
            </form>