2016-03-21 62 views
0

我試圖從某些Web服務訪問登錄服務,以便用戶驗證直接使用jquery到html頁面,但它似乎無法工作,即使我訪問Web服務瀏覽器的Web服務工作完美。下面是HTML代碼:無法獲取簡單的登錄數據,使用HTML到PHP Web服務

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.2.4/css/ionic.css"> 
    <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.2.4/css/ionic.min.css"> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.2.min.js"></script> 
    <script type="text/javascript"> 
     $("#login").click(function(){ 
      var username=$("#username").val(); 
      var password=$("#password").val(); 
      var dataString="username="+username+"&password="+password+"&login="; 
      if($.trim(email).length>0 & $.trim(password).length>0) 
       { 
        $.ajax({ 
         type: "POST", 
         url: "some url here", 
         data: dataString, 
         crossDomain: true, 
         cache: false, 
         beforeSend: function(){ $("#login").html('Connecting...');}, 
         success: function(data){ 
          if(data.success=="true") 
           { 
            localStorage.login="true"; 
            localStorage.username=username; 
            window.location.href = "index.html"; 
           } 
          else if(data.success="false") 
           { 
            alert("Login error"); 
            $("#login").html('Login'); 
           } 
         } 
        }); 
       } return false; 
     }); 
    </script> 
</head> 
<body> 
    <div class="bar bar-header bar-positive" style="margin-bottom:80px;"> 
     <a href="index.html" class="button button-clear">Home</a> 
     <h1 class="title">Login</h1> 
    </div> 
    <br/><br/> 
    <input id="username" type="text" placeholder="username" /> 
    <input id="password" type="password" placeholder="password" /> 
    <button id="login">Login</button> 
</body> 

即使是「beforeSend」代碼不工作,我的意思是,當我點擊登錄按鈕就可以了文本不會更改爲連接。我怎樣才能使它工作?

+0

檢查您的瀏覽器console..does它顯示任何錯誤? –

回答

0

更換

$.trim(email).length 

$.trim(username).length 

代碼中的另一個問題success function;如果我們得到的響應,truefalse我沒有這將是字符串值事情

/* Now */ 
}else if(data.success="false"){ 

/* should be == because here we are comparing not assigning */ 
}else if(data.success=="false"){ 

/* OR we can remove if part completely because we don't need any comparison if not success */ 
}else{ 

一件事,那將是布爾所以success function像下面的更新代碼:

success: function(data){ 
    if(data.success){ 
    localStorage.login = "true"; 
    localStorage.username = username; 
    window.location.href = "index.html"; 
    }else{ 
    alert("Login error"); 
    $("#login").html('Login'); 
    } 
} 

還有一個問題是你的代碼不會執行,因爲在這裏你試圖引用未加載的元素,即login button;

對所有修補程序使用以下代碼;

<html> 
    <head> 
    <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.2.4/css/ionic.css"> 
    <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.2.4/css/ionic.min.css"> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.2.min.js"></script> 

    <script type="text/javascript"> 
     /* code wrapped in $(function(){ to make sure the all elemtents loaded before we make use them */ 
     $(function(){ 
     $("#login").click(function(){ 
      var username = $("#username").val(); 
      var password = $("#password").val(); 
      var dataString = "username=" + username + "&password=" + password + "&login="; 
      if($.trim(password).length > 0 & $.trim(password).length > 0){ 
      $.ajax({ 
       type: "POST", 
       url: "some url here", 
       data: dataString, 
       crossDomain: true, 
       cache: false, 
       beforeSend: function(){ 
       $("#login").html('Connecting...'); 
       }, 
       success: function(data){ 
       if(data.success){ 
        localStorage.login = "true"; 
        localStorage.username = username; 
        window.location.href = "index.html"; 
       }else{ 
        alert("Login error"); 
        $("#login").html('Login'); 
       } 
       } 
      }); 
      } 
      return false; 
     }); 
     }); 
    </script> 
    </head> 
    <body> 
    <div class="bar bar-header bar-positive" style="margin-bottom:80px;"> 
     <a href="index.html" class="button button-clear">Home</a> 
     <h1 class="title">Login</h1> 
    </div> 
    <br/><br/> 
    <input id="username" type="text" placeholder="username" /> 
    <input id="password" type="password" placeholder="password" /> 
    <button id="login">Login</button> 
    </body> 
</html> 
0

電子郵件沒有之前

$.trim(email) 

更改它定義和連接...會出現

$.trim(username) 
0
change $.trim(email).length 

$.trim(username).length