<div class="js5-form" id="js5-form" ng-controller="enterCtrl">
    <div id="enter-all" >
      <h3>jnshu后臺登錄</h3>
      <form action="" name="myForm">
        <div class="js5-input-div">
          <div class="js5-input-img1"></div>
          <input id="js5-userNum" type="text" name="userName" placeholder="用戶名" maxlength="12" ng-model="userName" ng-keyup="mykey($event)" required/>
        </div>
      </form>
      <form action="" name="registerForm">
        <div class="js5-input-div">
          <div class="js5-input-img2"></div>
          <input id="js5-password" type="password" name="userPsd" placeholder="密碼" maxlength="20" ng-model="userPsd" ng-keyup="mykey($event)" ng-minlength="5" ng-maxlength="16" required/>
        </div>
      </form>
      <!--賬號和密碼的登錄框-->
      <form action="" >
        <div class="js5-input-div">
          <span class="js5-input-divSpan">驗證碼：</span>
          <input type="text" placeholder="不區(qū)分大小寫" class="js5-form3-input" id="js5-form3-input" ng-model="writeCode" maxlength="6" ng-keyup="mykey($event)">
          <input type="text" class="js5-authCode" value="" id="js5-authCode" ng-model="showAuthCode" disabled="disabled">
           <!--disabled="disabled"禁止驗證碼框文字被選中-->
          <span class="spanShift" ng-click="changeVerify()">獲取</span>
        </div>
      </form>

var authCode;
  randomCode=$("#js5-authCode").eq(0);//獲取驗證碼出現(xiàn)的方框dom
console.log(randomCode);
function createCode() {
  authCode="";//設(shè)置這個為空變量，然后往里面添加隨機數(shù)
  var authCodeLength=4;//隨機數(shù)的長度
  randomArray=[0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 'S','T','U','V','W','X','Y','Z'];
  //創(chuàng)建一個數(shù)組，隨機數(shù)從里面選擇四位數(shù)或者更多
  for(var i=0;i<authCodeLength;i++){
    var index=Math.floor(Math.random()*36);//隨機取一位數(shù)
    authCode +=randomArray[index];//取四位數(shù)，并+相連
  }
  console.log(authCode);//取到四位隨機數(shù)之后，跳出循環(huán)
  randomCode.val(authCode);//將四位隨機數(shù)賦值給驗證碼出現(xiàn)的方框
  console.log(randomCode.val());
}
//以上是封裝的獲取驗證碼的函數(shù)
$(function () {//當文檔加載結(jié)束后，運行這個函數(shù)
  createCode();//一開始先運行一遍取隨機數(shù)的函數(shù)
  $("#js5-btn").click(function () {//這里是一個點擊事件
    console.log(window.randomCode);
    //這里寫了一個必報，window.randomCode是在文檔里面找到這個dom，否則上文的四個隨機數(shù)傳不到這里來
    var randomCode=window.randomCode.val();
    console.log(randomCode);
    var authInput=$("#js5-form3-input").val().toUpperCase(),
      user=$("#js5-userNum").val(),
      psd=$('#js5-password').val();
    //上面三個是分別獲取驗證碼輸入框的值，賬號的值，密碼的值。
    //驗證碼輸入框這里，最后toUpperCase()方法是把小寫轉(zhuǎn)換成大寫
    console.log(authInput);
    console.log(randomCode);
    console.log(user,psd);
    if (randomCode===authInput) {
    //驗證驗證碼，在驗證碼輸入框與驗證碼的值不相等之前，是不會進入下面登錄的步驟的，驗證碼是第一步關(guān)卡
      var firstAjax = new XMLHttpRequest();
      //創(chuàng)建ajax對象，這里是ajax跨域的部分
      firstAjax.open("POST", "這里是你url跨域的地址", true);
      //連接服務(wù)器，跨域。
      firstAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      //setRequestHeader() 方法指定了一個 HTTP 請求的頭部，它應(yīng)該包含在通過后續(xù) send() 調(diào)用而發(fā)布的請求中。
      //可以理解為，這是http的請求頭，固定格式，位置必須要在open之后，send之前。
      firstAjax.send("name=" + user + "&pwd=" + psd);
      //在使用POST方式時參數(shù)代表著向服務(wù)器發(fā)送的數(shù)據(jù)，前面兩個是賬號框和密碼框
      firstAjax.onreadystatechange = function () {//當參數(shù)被傳入服務(wù)器的時候，引用監(jiān)聽事件。
        if (firstAjax.readyState == 4) {//readyState四種狀態(tài)，當執(zhí)行四步完成之后
          if (firstAjax.status == 200) {//返回的是200，代表成功，404未找到。
            var returnValue = JSON.parse(firstAjax.responseText);//取回由服務(wù)器返回的數(shù)據(jù)
            console.log(returnValue);
            if (returnValue.code == 0) {//這里是后端定義的，當code==0的時候，代表登錄正確。
              window.location.;
              //后端返回的數(shù)據(jù)驗證成功就跳轉(zhuǎn)鏈接。
            }
            else {
              $("#js5Message").text(returnValue.message);//當code不等于0時，返回出錯信息
            }
          } else {
            alert("出錯咯，咯咯咯");//返回的不是200的時候，出錯。
          }
        }
      };
      createCode();//點擊登錄按鈕，驗證之后會刷新驗證碼
    }
    else {
      $("#js5Message").text("驗證碼錯誤，請重新輸入");
      createCode();//驗證碼錯誤，刷新驗證碼。
    }
  })
});

var enter=angular.module("myApp");
enter.controller('enterCtrl',['$scope','$http','$state',function ($scope,$http,$state) {
  $scope.changeVerify=function () {//定義了一個點擊事件，獲取驗證碼
    var authCode="";
    var authCodeLength=4;//取幾個隨機數(shù)字
    var randomArray=[0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 'S','T','U','V','W','X','Y','Z'];
    for(var i=0;i<authCodeLength;i++){
      var index=Math.floor(Math.random()*36);//隨機取一位數(shù)
      authCode +=randomArray[index];//取四位數(shù)，并+相連
    }
    $scope.showAuthCode=authCode;//賦值
    console.log($scope.showAuthCode);
  };
  //上面是封裝的獲取驗證碼的函數(shù)，會在下面進行調(diào)用
 (function () {
    $scope.changeVerify();//調(diào)用點擊事件。
    $scope.enter=function (userName,userPsd) {
      //點擊登錄按鈕事件，將雙向綁定的賬號密碼當做參數(shù)傳入函數(shù)
      if ($scope.writeCode.toUpperCase() ==$scope.showAuthCode){//toUpperCase()將小寫轉(zhuǎn)化為大寫
        //雙向綁定驗證碼輸入框，可以直接使用，這里是驗證驗證碼
        $http({
          method:"POST",
          url:"你的跨域地址",//$http的固定格式
          params:{
            "name":userName,
            "pwd":userPsd
            //雙向綁定的參數(shù)傳到下個頁面
          }
        }).then(function (res) {
          //獲取服務(wù)器返回的參數(shù)
          console.log(res);
          if (res.data.code!==0){
            //參數(shù)不為0的時候，彈出提示
            alert(res.data.message);
          }else {
            //參數(shù)為0的時候，跳轉(zhuǎn)頁面
            $state.go("home.studentList");
          }
        })
      }else {
        alert("驗證碼輸入錯誤咯，咯咯咯");
        $scope.changeVerify();//驗證后，刷新驗證碼
      }
    }
  }());