QXQZX's Blog

这段时间在写一个h5+app,用于一个组队比赛项目的app。由于自身也没有多少前端开发的经验,也就是闷着头一直乱写,在开发中也遇到了各种难题。

今天又解决一发问题,(此处需要掌声), 成就感!

关于登录表单submit的问题

这个过程需要用到的技术主要就是ajax技术和js的onsubmit技术。

过程如下:

1.用户输入 用户名和密码

2.当用户点击提交按钮时,利用ajax请求后端接口 进行用户名密码验证。

但是这时候出现一个问题,就是当 用户点击输入法的 发送 提交 按钮的时候,我们怎么验证

这时候就需要原生js的 onsubmit 方法了

3.1 验证不通过,onsubmit返回false,表单无法提交,页面提示用户密码有错。

3.2 验证通过,onsubmit返回true,表单提交,服务器返回用户内部视图,登陆成功。

废话不说上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// 点击手机键盘  提交按钮
document.getElementById("login").onsubmit = function() {
subData();
};
// 点击登录按钮
document.getElementById("login-btn").addEventListener('tap', function() {
subData();
})


function subData() {
// 获取表单数据
var data = getFormData("login");

mui.ajax('http://192.168.1.142:8080/user/login.do', {
data: JSON.stringify({
'username': data.username,
'password': data.password
}),
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒;

// async: false, // 同步方式是为了解决 手机键盘提交按钮 提交表单验证bug的

contentType: 'application/json;charset=utf-8', // 少了会报错
success: function(data) {
console.log(JSON.stringify(data));
if (data.status == 200) {
mui.toast("登录成功")
} else if (data.status == -200) {
mui.toast("登录失败,请重新登录")
}
},
error: function(xhr, type, errorThrown) {
console.log("error");
}
});
};

如果用上面的代码,点击手机键盘 提交按钮 是无法完成验证操作的、

原因

上面代码用的是 异步的方式

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
function checkpwd(){
//1............
$.ajax({
//2........
});
//3.........
}
</script>


  • 如果是同步方式:当1执行完毕后,接着执行ajax,线程会处于等待状态,等2执行完毕之后,接着执行3.

  • 如果是异步方式:当1执行完毕之后,接着执行ajax,但是ajax不会阻塞主线程,ajax执行的同时会执行3.


下面展示错误的ajax验证方式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 点击手机键盘  提交按钮
document.getElementById("login").onsubmit = function() {
// 1........

mui.ajax('http://192.168.1.142:8080/user/login.do', {
// 2.......
data: JSON.stringify({
'username': data.username,
'password': data.password
}),
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
contentType: 'application/json;charset=utf-8', // 少了会报错
success: function(data) {
console.log("success");
},
error: function(xhr, type, errorThrown) {
console.log("error");
}
});

// 3........
};


上面的代码, 先执行 1 后 执行 2 。但是2 (ajax) 不会阻塞主线程,2 (ajax) 执行的同时会执行3. 这时候3 没等验证成功,立马返回false

因此,当使用异步方式进行验证的时候,会出现无论如何,onsubmit(onclick)都不会起作用,这会让程序员感觉自己的代码有问题,其实代码没问题,是逻辑的问题。要解决这个问题,我们就必须用ajax的同步方式。


解决方案

改为同步方式 ajax 中添加

1
async : false,



参考文章


 评论