今天完成的工作
今天完成的工作是在任务5这个任务的css样式基础上添加js的点击事件,js的点击事件需要的内容是通过ajax的四个步骤发送请求并获取响应,四个步骤中最关键的步骤是在我们在状态描写的过程中,在这个过程中
if (oAjax.readyState == 4 && oAjax.status == 200)
表示通道成功后我们可以实现的效果。在整个状态下,可以打印一下我们输入的内容,若出现代表通信状态是成功建立了。
var resdata = JSON.parse(oAjax.responseText);
console.log(name);
console.log(pwd);
console.log(resdata);
并且需要把我们的接收出来的内容从json格式转换为我们要的内容格式,同时若是状态接连不成功,那就会出现穿个我们错误的信息内容并通过设定一个计时器把内容的信息定时清除一次。
在其他的内容当中还需要将通道打开,并把请求头格式转化,发送请求这一套的流程。
oAjax.open('POST', '/carrots-admin-ajax/admin/login/fpx', true);
oAjax.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
oAjax.send(data);
但是昨天的测试并没能成功,出现了比较多的问题。
第一点是在我是用官网提供的接口时,内容均设置完毕反向代理设置为
location /carrots-admin-ajax/{
proxy_pass http://dev.admin.carrots.ptteng.com/;
}
但在测试的时候会有报出500的错误,无法判断是代码当中存在问题,还是服务器出现了问题。在使用另一个接口是师兄他们复盘用的过程中,同样设置的方式是没有问题的,但是报错四百了那么确实可能是代码上的问题。
明天的工作完成
明天需要我去完善好这个问题,并且进一步的改进才行附上昨日代码
var obtn=document.getElementById("btn")
var aValue = document.getElementsByTagName('input');
var oMsg = document.getElementById('msg');
var timer = null;
obtn.onclick=function (event){
event.preventDefault();
var name = aValue[0].value;
var pwd = aValue[1].value;
var data = "name=" + name + "&pwd=" + pwd;
var oAjax = new XMLHttpRequest();
oAjax.onreadystatechange = function() {
if (oAjax.readyState == 4 && oAjax.status == 200) {
var resdata = JSON.parse(oAjax.responseText);
console.log(name);
console.log(pwd);
console.log(resdata);
if (resdata.code === 0) {
alert("成功");
} else {
clearInterval(timer);
oMsg.innerHTML = resdata.message;
timer = setTimeout(function() {
oMsg.innerHTML = '';
}, 3000)
}
}
}
oAjax.open('POST', '/carrots-admin-ajax/admin/login/fpx', true);
oAjax.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
oAjax.send(data);
}
评论