jQuery和AJAX只能工作一次

Question

我有AJAX和jQuery的問題。我編寫登錄系統的函數，但它只能第一次運行。這裏是我的代碼：

的HTML模式：

<form role="form" onsubmit=" return login()" method="post" action="" > 
    <div class="form-group"> 
    <label for="userName"><span class="glyphicon glyphicon-user"></span>E-mail</label> 
    <input type="email" name="emailLogin" class="form-control" id="userName" placeholder="e-mail" required> 
    </div> 
    <div class="form-group"> 
     <label for="password"><span class="glyphicon glyphicon-eye-open"><span>Password</label> 
     <input type="password" name="passLogin" class="form-control" id="password" placeholder="Password" required> 
    </div> 
    <button type="submit" class="btn btn-success btn-block">Login<span class="glyphicon glyphicon-log-in"></span></button> 
</form> 

這裏是jQuery的：

function login(){ 
    login=document.getElementById('userName').value; 
    pass=document.getElementById('password').value; 
    var dataString="emailLogin="+login+"&passLogin="+pass; 

    $.ajax({ 
    type: "POST", 
    url: "models/handler/KlientHandler.php", 
    cache: false, 
    data: dataString, 
    success: function(text){ 
     if(text=='0'){ 
     $("#loginError").removeClass('hidden'); 
     }else{ 
     $("#loginOk").removeClass('hidden'); 
     $("#myModal").modal('hide'); 
     $("#loginLi").html("<a id=\"user\">"+login+" (Profile)<span class=\"glyphicon glyphicon-user\"></span></a>"); 
     $("#regLi").html("<a href=\"logout\" id=\"user\">"+login+" (Logout)<span class=\"glyphicon glyphicon-log-out\"></span></a>"); 
     } 
    } 
    }); 
    return false; 
} 

Answer 1

你用一個字符串覆蓋您的登錄功能。

function foo() { 
 
    alert('foo'); 
 
    foo = function() { 
 
    alert('bar'); 
 
    } 
 
}

<a onclick="foo()"> 
 
click me! 
 
</a>

見第二次點擊這裏如何會導致不同的警報？在你的情況下，你用一個字符串而不是一個函數替換函數，導致語法錯誤。不要忘記var你的變量。

var login=document.getElementById('userName').value; 
var pass=document.getElementById('password').value; 

Answer 2

該代碼段測試您的邏輯，並且您的登錄和傳遞變量存在控制檯錯誤。我將它們設置爲'var'，並將您的成功邏輯放入ajax請求的'錯誤'部分，因爲我無法訪問您的服務器，但它確實創建了註銷按鈕。那是你想要的嗎？

function login() { 
 
    var login = document.getElementById('userName').value; 
 
    var pass = document.getElementById('password').value; 
 
    var dataString = "emailLogin=" + login + "&passLogin=" + pass; 
 

 
    $.ajax({ 
 
     type: "POST", 
 
     url: "models/handler/KlientHandler.php", 
 
     cache: false, 
 
     data: dataString, 
 
     success: function(text) { 
 
      /* Success logic */ 
 
     }, 
 
     error: function() { 
 
       alert('Test - success logic'); 
 
       $("#loginOk").removeClass('hidden'); 
 
       //$("#myModal").modal('hide'); 
 
       $("#loginLi").html("<a id=\"user\">" + login + " (Profile)<span class=\"glyphicon glyphicon-user\"></span></a>"); 
 
       $("#regLi").html("<a href=\"logout\" id=\"user\">" + login + " (Logout)<span class=\"glyphicon glyphicon-log-out\"></span></a>"); 
 
     } 
 

 
    }); 
 
    return false; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form role="form" onsubmit=" return login()" method="post" action="" > 
 
    <div class="form-group"> 
 
    <label for="userName"><span class="glyphicon glyphicon-user"></span>E-mail</label> 
 
    <input type="email" name="emailLogin" class="form-control" id="userName" placeholder="e-mail" required> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="password"><span class="glyphicon glyphicon-eye-open"><span>Password</label> 
 
     <input type="password" name="passLogin" class="form-control" id="password" placeholder="Password" required> 
 
    </div> 
 
    <button type="submit" class="btn btn-success btn-block">Login<span class="glyphicon glyphicon-log-in"></span></button> 
 
</form> 
 

 
<div id="loginLi"></div> 
 
<div id="regLi"></div> 
 
<div id="loginOk">Login OK</div>