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>