发表于: 2017-06-29 21:24:18
2 1091
今天主要完成的工作是收尾了任务5。
1. 使用ajax异步请求数据,满足条件时触发click事件
先启动nginx,地址栏输入设定的端口localhost:8081
$("#getInside").click(function () {
$.ajax({
type: "POST",
url: "/carrots-admin-ajax/a/login",
data: {
name:$('#username').val(),
pwd:$('#psw').val()
},
success: function (data) {
var data1 = JSON.parse(data);
if (data1.code == 0) {
window.location.href = "https://www.jnshu.com/"
}
else {
alert("账号或密码错误")
}
}
})
});
“POST”是将数据传输到接口,name:$('#username').val(),和 pwd:$('#psw').val()输入框内的值会抓取并传输,如果成功跳转到https://www.jnshu.com/,反之则弹窗提示账号或密码错误
2. 改正了一个之前的bug
function checkName() {
if (uName.value.length<5 || uName.value.length>10) {
error1.innerHTML = "用户名长度必须在5至20位之间";
}
}
在输入框内输入数据,然后触发函数,最开始使用jq来写,用append增加内容,会导致每满足一次if条件就增添一个内容值,但是如果改用这种方法,触发后只增添一次
目前这个任务没有其他问题了,明天计划开任务6。
今天的主要收获是自适应的问题,http://www.cnblogs.com/2050/p/3877280.html这篇文章准备抽时间认真看一遍。
遇到的问题
今天主要遇到了一个问题,即最开始写如上代码的时候,点击一次并不能触发,需要多次点击才有可能页面跳转。
最开始解决方法是增添一个alert。
});
alert("111");
});
最开始像这样,在ajax后面增添一个alert,但是这样用户体验非常差
后来搜了一些相关资料,然后发现其他人也有这个问题,解决的方法是
$.ajax({
async: false,
type: "POST",
url: "/carrots-admin-ajax/a/login",
ajax是默认异步,即async: true,,如果增添了async: false,就会将处理改为同步,防止异步数据出现值丢失的问题,但是这样改用了之后问题还是存在
最后确认了问题在于
<button type="button" id="getInside">登录</button>
使用button标签,要注意始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。如果在 HTML 表单中使用 button 元素,不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本,而其他浏览器将提交 value 属性的内容。需要在 HTML 表单中使用 input 元素来创建按钮。
增添type="button",最终解决了这个问题。
评论