发表于: 2017-04-20 21:09:35
2 627
今天完成的任务
1.js7任务的开始
明天的计划
1.完成js任务七
遇到的问题
1.双向绑定登录
在两个输入框里面使用ng-model指令实现数据绑定。
当输入字段发生变化的时候,数据模型会检查到这个变化。
<input id="user-name" class="input-box" type="text" placeholder="用户名" ng-model="name">
<input id="password" class="input-box" type="password" placeholder="密码" ng-model="pwd">
获取这两个值
$scope.name
$scope.pwd
在Angular里面使用xhr,看书之后发现是用$http,这个是简单封装了原生的Xhr对象,用法也和原来的差不多
$http({
method: 'POST',
url: '/carrots-admin-ajax/a/login',
data: 'name='+$scope.name+'&pwd=' +$scope.pwd,
headers:{
'Content-Type': 'application/x-www-form-urlencoded'
}
})
然后就是获取后台的返回值,看了资料,用then,1.5以前可以用.success或者.error方式,1.5版本之后只能用.then
.then(function (response) {
if (response.data.message == 'success') {
$window.location.href="main.html";
} else {
p.innerHTML=response.data.message;
}
})
response就是返回的数据,用什么代替都可以的
一开始总是传过去的数据格式有问题,对比了我原来用ajax写的发现,原来传输过去的类型是form data ,又看了下接口文件里面的约定,发现要修改一下
headers:{
'Content-Type': 'application/x-www-form-urlencoded'
}
这段代码就是后来加的。
2.看书的时候 看到我原来的控制器用的是全局控制器,这样会污染全局命名空间,然后做了修改
<section class="login-box" ng-controller="LoginController">
在最外层添加了一个新的控制器 修改后如下
var login_app = angular.module('login-App',[]);
login_app.controller('LoginController', function ($scope,$http,$window) {
收获
收获了关于双向绑定,还有angular的xhr操作
评论