Bootstrap+angulerjs实现异步登陆
石可破，丹可磨
Bootstrap+angulerjs实现异步登陆
前端 / 管理员 发布于 2018-05-25 23:49:33 363
html:
<body style="background:#fff;" ng-app="Ajax" ng-controller="Ajax">
<form>
<div class="form-group" style="margin-bottom: 5px;">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" ng-model="email" class="form-control" id="inputEmail3" />
<span id="check_user" style="font-size: 8px;color: red;display: none;"></span>
</div>
</div>
<div class="form-group" style="margin-bottom: 0px;">
<label for="inputPassword3" class="col-sm-2 control-label">Pass</label>
<div class="col-sm-10">
<input type="password" ng-model="password" class="form-control" id="inputPassword3" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox" />Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" ng-click="get_more();" class="btn btn-primary btn-large">Sign in</button>
</div>
</div>
</form>
js:
<script type="text/javascript">
var myModule = angular.module("Ajax",[]);
myModule.controller("Ajax",["$scope","$http",function Ajax($scope,$http){
$scope.get_more = function(){
$http({
method: "POST",
url: "login",
data:{'username':$scope.username,
'email':$scope.email,
'password':$scope.password
}
}).
success(function(data, status) {
//$scope.status = status;
$scope.users = data;
if (data.error == 1) {
alert(data.info);
location.reload();
}else{
$("#check_user").html(data.info);
$("#check_user").css("display","block");
};
}).
error(function(data, status) {
//$scope.data = data || "Request failed";
//$scope.status = status;
});
}
}]);
</script>
效果：（用file_get_contents("php://input")获取参数，在json_decode转）
{ email: "11", password: "1"}- 相关文章
- 常用JavaScript正则表达式合集(0个评论)
- Angularjs中$http异步删除数据及实例详解(0个评论)
- Vue框架MVVM架构的原理实现详解(0个评论)
- 如何删除a标签onclick事件及让点击事件失效？简单的防重复点击功能(0个评论)
- SSR解决了什么问题？有做过SSR吗？你是怎么做的？(0个评论)
- 近期文章
- Hyperf2.1框架中使用hyperf-ext/mail组件包发送邮件流程步骤(1个评论)
- 推荐一波站长辅助测试工具，帮助站长测试拨测及诊断分析网站(0个评论)
- GitHub正确的搜索技巧姿势你掌握了吗？(0个评论)
- 常用JavaScript正则表达式合集(0个评论)
- 为什么网站建设者，必须学会使用数字证书，也必须为网站部署SSL证书(0个评论)
- 对SSL证书2021年12月1日后，通配符证书不支持文件验证的解决方案(0个评论)
- Angularjs中$http异步删除数据及实例详解(0个评论)
- Vue框架MVVM架构的原理实现详解(0个评论)
- Nginx中自己定义的非官方的状态码你了解吗(0个评论)
- http中400，401，402，403，404等等及400+状态码详解及出现的原因及区别(0个评论)
- 近期评论
小白 在
Hyperf2.1框架中使用hyperf-ext/mail组件包发送邮件流程步骤中评论 有用..嗯嗯嗯 在
HTML5如何调用摄像头？中评论 嗯嗯嗯..博主 在
建议,想法,思路,来水!中评论 看到的老铁 可以留个言本站急需换友链！！！..xsjyBldb 在
freenom域名解析步骤中评论 555..博主 在
nginx中500，501，502，503，504，505状态码的详解及出现的原因/区别中评论 有错误可以指正吧 没必要搞人心态 老铁 信不信我删库跑路..
Auther ·HouTiZong© 2009-2020 zongscan.com 版权所有ICP证:
粤ICP备20027696号
也可以扫右边的二维码
