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>