发表于: 2017-06-29 21:24:18

2 1094


今天主要完成的工作是收尾了任务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 = "用户名长度必须在520位之间";
   }
}

在输入框内输入数据,然后触发函数,最开始使用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",最终解决了这个问题。


返回列表 返回列表
评论

    分享到