javascript - angular 向后台发送数据，出现2次请求
本文介绍了javascript - angular 向后台发送数据，出现2次请求的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
因为要兼容IE7，没有用到route功能，在index.html页面include了菜单和登陆注册页面（header.html），在header页面中点击登陆时，后台接收到2次请求，一次无数据，第二次成功接收数据了。我检查页面了没有引用2次controller，但是不知为啥就是触发了2次请求。还请各位大神指点
html
<div ng-controller="LoginCtrl">
<!-- 头部 登录注册 -->
<div class="top" style="position:relative; z-index:99">
<div class="topMain">
<div class="loginItem"><a href="javascript:;" class="logincs" ng-click="showLogin()">登录</a><a href="javascript:;" class="regcs" ng-click="showRegin()">注册</a></div>
<div class="user" style="display: none"><span><a href="myshopcart.html" class="">135123456789</a></span><a href="javascript:;" class="regcs" ng-click="logout()">退出</a></div>
<div class="cartItem" style="position: relative" ng-mouseenter="cartshow = true" ng-mouseleave="cartshow = false" ng-controller="MyCartCtrl">
<a href="#" class="cartItemi cartIcon">购物车</a><span class="cartNum">({{itemtotal}})</span>
<!-- 购物车 -->
<div class="carNull" style="display: none" ng-show="cartshow">
<ul class="orderList">
<li ng-repeat="item in mycart">
<div class="pull-left col-md-4 ellipsis"><img src="images/watch01.png" alt="" width="80"></div>
<div class="pull-left col-md-4 ellipsis"><span class="size-14">时尚款BBBB手表{{item.name}}</span><br>
<span>{{item.itemcount}}
<button type="button" ng-click = "minus($index)" style="padding:10px">-</button>
<button type="button" ng-click = "add($index)" style="padding:10px">+</button></span></div>
<div class="pull-right col-md-2 ellipsis"><span class="color0">{{item.price * item.itemcount | number: 2}}</span><br><a href="javascript:;" class="color0" ng-click="delItem($index)">删除</a></div>
</li>
<li class="last-child">
<div class="pull-left ellipsis">
<p class="padding-left-1x">
共({{itemtotal}})件商品<br/><span class="color0" style="font-size:16px">{{total| number:2}}</span>
</p>
</div>
<div class="pull-right" style="margin-top:10px">
<button class="btn btn_og sm_btn" ng-click="topay()">去购物车结算</button>
</div>
</li>
</ul>
</div>
<!-- 购物车 end -->
</div>
</div>
</div>
<!-- 头部导航 div -->
<div class="navDiv">
<div class="navMain">
<!-- logo -->
<div class="logo"><a href="index.html"><img src="images/logo.png"/></a></div>
<!-- 右侧导航 -->
<ul>
<li><a href="index.html">首页</a></li>
<li class="telWatch"><a href="product1.html">电话手表</a>
<div class="secNav">
<ol>
<li class="clnLine">
<a href="#"><img src="images/watch01.png" alt=""></a>
<p>武士款AAA</p></li>
<li><a href="#"><img src="images/watch02.png" alt=""></a>
<p>时尚款BBB</p></li>
</ol>
</div>
</li>
<li><a href="product1.html">智能耳机</a></li>
<li><a href="#">论坛</a></li>
<li><a href="appdown.html">应用下载</a></li>
</ul>
</div>
</div>
<!-- 头部导航 end -->
<!-- 登录框 -->
<div class="tboxCont login" style="display:none">
<form name="loginForm" novalidate ng-submit="userlogin(userPhone,userPwd)">
<ul>
<li><span>手机号码：</span>
<input type="text" class="txtbox w_300" ng-model="userPhone" name="userPhone" minlength="2" maxlength="20" ng-focus ng-pattern=" /^0?1[3|4|5|8][0-9]\d{8}$/ " required/>
<p ng-show="loginForm.userPhone.$error.required" class="color0">请输入11位手机号码</p>
<p ng-show="loginForm.userPhone.$error.pattern" class="color0">请输入正确的手机号码</p>
</li>
<li><span>密码：</span>
<input type="password"placeholder="8-32位字符"class="txtbox w_300" ng-model="userPwd" name="userPwd" minlength="2" maxlength="20" ng-focus ng-pattern="/^[a-zA-Z0-9\u0391-\uFFE5]{2,20}$/ " required />
<p ng-show="loginForm.userPwd.$error.required" class="color0">请输入密码</p>
<p ng-show="loginForm.userPwd.$error.pattern" class="color0">2-20个字符，可由中文、字母和数字组成</p>
</li>
<li class="pl70 js_rem" style="height:30px">
<label for="rebpwd">
<input type="checkbox" ng-model="rebpwd" id="rebpwd"/>
<img src="images/dchecked_gr1.png" id="phoneNoConstom" class="radio_img">记住手机号码
</label>
</li>
</ul>
<div class="btn_pd"><input type="submit" value="确定" class="btn btn_og"></div>
<div class="forget">
<a href="javascript:;" class="color3" id="regBtn" ng-click="showReginpage()">注册新账号</a>
<a href="forgetpw.html" class="color0 logincs">忘记密码?</a>
</div>
<div class="otherLogin">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</form>
</div>
<!-- 登录框 end -->
<!-- 注册框 -->
<div class="tboxCont reg" style="display:none">
<form name="userForm" novalidate ng-submit="addUsers(user)">
<ul>
<li><span>手机号码：</span>
<input type="text" class="txtbox w_300" ng-model="user.phone" name="phone" minlength="2" maxlength="20" ng-focus ng-pattern=" /^0?1[3|4|5|8][0-9]\d{8}$/ " required/>
<p ng-show="userForm.phone.$error.required || userForm.$dirty && addUser.phone.$valid" class="color0">请输入11位手机号码</p>
<p ng-show="userForm.phone.$error.pattern" class="color0">请输入正确的手机号码</p>
</li>
<li><span>验证码：</span>
<input type="text"placeholder="8-32位字符"class="txtbox w_188" ng-model="user.code" name="code" minlength="2" maxlength="20" ng-focus ng-pattern="/^[a-zA-Z0-9\u0391-\uFFE5]{2,20}$/ " required/>
<input type="button" value="获取短信验证码" class="btn sm_btn font_14" style="*padding-left:0; *padding-right:0">
<p ng-show="userForm.code.$error.required" class="color0">请输入正确验证码</p>
<p ng-show="userForm.code.$error.pattern" class="color0">2-20个字符，可由中文、字母和数字组成</p>
</li>
<li><span>密码：</span>
<input type="password" placeholder="8-32位字符" class="txtbox w_300" ng-model="user.pwd" name="pwd" minlength="2" maxlength="20" ng-focus ng-pattern="/^[a-zA-Z0-9\u0391-\uFFE5]{2,20}$/ " required />
<p ng-show="userForm.pwd.$error.required" class="color0">请输入密码</p>
<p ng-show="userForm.pwd.$error.pattern" class="color0">2-20个字符，可由中文、字母和数字组成</p>
</li>
<li><span>确认密码：</span><input type="password" placeholder="8-32位字符" class="txtbox w_300" name="pwd2" ng-model="user.pwd2" minlength="2" maxlength="20" ng-focus ng-pattern="/^[a-zA-Z0-9\u0391-\uFFE5]{2,20}$/ " required/>
<p ng-show="userForm.pwd2.$error.required" class="color0">两次输入的密码必须一致</p>
<p ng-show="userForm.pwd2.$error.pattern" class="color0 pwd2">两次输入的密码必须一致</p>
</li>
<li class="pl70" style="height:30px">
<label><input type="checkbox" name="protocol" ng-model="protocol" required /> 阅读并同意入网服务协议</label><a href="javascript:;">服务条款、隐私政策</a>
<span class="color0" ng-show="!protocol && submitted">
请先同意协议
</span>
</li>
</ul>
<div class="btn_pd"> <input type="submit" value="立即注册" class="btn btn_og" /></div>
</form>
</div>
<!-- 注册框 end -->
</div>js代码：
function LoginCtrl($scope,$http,$rootScope) {
// console.log("请求进入")
// 二级导航显示
$(".telWatch").on("mouseenter",function(){
$(".secNav").slideDown(function(){
$(".secNav").stop(true);
})//.stop(true,true);
return;
})
$(".telWatch").on("mouseleave",function(){
$(".secNav").slideUp(function(){
$(".secNav").stop(true,true);
});
return;
})
//登陆事件
$scope.showLogin = function(){
//页面层
layer.open({
type: 1,
title:"登录",
shadeClose: true,
skin: 'layui-layer-rim', //加上边框
area: ['500px', '500px'], //宽高
content: $('.login')
})
}
//注册事件
$scope.showRegin = function(){
//页面层
layer.open({
type: 1,
title:"注册",
shadeClose: true,
skin: 'layui-layer-rim', //加上边框
area: ['500px', '500px'], //宽高
content:$('.reg')
})
}
//注册
$scope.addUsers = function (item) {
//表单正常提交
if($scope.userForm.$valid){
if($scope.user.pwd != $scope.user.pwd2){
$(".pwd2").show();
return false
}else{
$(".pwd2").hide();
}
var url = "http://10.12.12.74:30030/gateway.do";
//正常提交表单
$http({
method : 'POST',
url : url,
data: {phone:phone,password:pwd},
header:headers
}).success(function(data, status) {
console.log(data.msg);
// alert(item.pwd,item.pwd2)
// $(".layui-layer-close1").click();
// $('.user').show();
// $(".loginItem").hide();
}).error(function(data, status) {
});
}
else{
$scope.submitted = true;
}
};
$scope.rebpwd = true;
//登陆
$scope.userlogin = function (phone,pwd) {
console.log(phone);
//表单正常提交
if($scope.loginForm.$valid){
//正常提交表单
var url = "http://10.12.12.74:30030/gateway.do";
var headers= {'Content-Type':'application/json'};
$http({
method : 'POST',
url : url,
data: {phone:phone,password:pwd},
header:headers
}).success(function(data, status) {
console.log(data.msg);
}).error(function(data, status) {
console.log(data.msg);
});
}
else{
$scope.submitted = true;
}
};
$scope.logout = function(){
alert("退出按钮")
}
}解决方案
你的userLogin请求跨域了，因此先需要一次HTTP OPTIONS请求，来判断对应server是否允许资源访问。
参见 http://stackoverflow.com/ques...
这篇关于javascript - angular 向后台发送数据，出现2次请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
