from表单提交、表单验证和SpringMVC的数据绑定

最新推荐文章于 2019-10-22 15:46:15 发布

时光dance

最新推荐文章于 2019-10-22 15:46:15 发布

阅读量355

点赞数

分类专栏： Java 文章标签： Java

本文链接：https://blog.youkuaiyun.com/weixin_44699844/article/details/100040284

版权

Java 专栏收录该内容

1 篇文章

订阅专栏

普通from表单提交


<form id="form1" action="/users/login" method="post">
        <p>用户名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
        <p>密　码：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
        <p><input type="submit" value="登录">&nbsp<input type="reset" value="重置"></p>
    </form>

注意点：登录按钮type为submit，通过设置action的url，mehtod 进行数据的传输。

Ajax实现from表单提交
前段代码

<form id="form1" action="#" method="post">
        <p>用户名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
        <p>密　码：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
        <p><input type="button" value="登录">&nbsp<input type="reset" value="重置"></p>
   </form>

JS代码

<script type="text/javascript">
        function login() {
            $.ajax({
            //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/users/login" ,//url
                data: $('#form1').serialize(), //表单数据
                success: function (result) {
                        alert("SUCCESS");
                    }
                  
                },
                error : function() {
                    alert("异常！");
                }
            });
        }
    </script>

注意点：登录按钮type为button
from表单验证

<form id="form1" action="#" method="post" onsubmit="submitTest()">
        <p>用户名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
        <p>密　码：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
        <p><input type="button" value="登录">&nbsp<input type="reset" value="重置"></p>
   </form>

JS代码

function submitTest(){
	return false;//no
	return true;//yes

}

Ajax实现fron表单提交时的表单验证（解决οnsubmit=return fasle）

<form id="form1" action="#" method="post">
        <p>用户名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
        <p>密　码：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
        <p><input type="button" value="登录" onclick="submitTest()">&nbsp<input type="reset" value="重置"></p>
   </form>

JS代码

function submitTest(){
	var bool;
	if(true){

	}else{
bool = false;
	 $.ajax({
            //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/users/login" ,//url
                 **async:false,//同步方式,(可能造成表单验证失败的原因)**
                data: $('#form1').serialize(), //表单数据
                success: function (result) {
                       bool = true;
                    }
                  
                },
                error : function() {
                    booll = false;
                }
            });
}
rerurn bool;
}

问题原因：
在执行ajax时，async默认的默认值为true,这种情况为异步方式，就是说ajax发送请求后，在等待服务端返回的这个过程中，前台会继续执行ajax块后面的脚本，直到服务端返回正确的结果才会执行success,也就是说这时执行的是两个线程，一个线程在执行ajax时另一个进程已经执行return flat了。所以一直返回false.把async改为false，这时才是同步方式，只有一个线程。

未完后续继续记录！