[英]jQuery and AJAX work only once
I have problem with AJAX and jQuery.我有 AJAX 和 jQuery 的问题。 I write function for login to system, but it works only first time.我写了登录系统的函数,但它只在第一次工作。 Here is my code:这是我的代码:
html in modal:模态中的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>
here is jquery:这是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;
}
You are overwriting your login function with a string.您正在用字符串覆盖您的登录功能。
function foo() { alert('foo'); foo = function () { alert('bar'); } }
<a onclick="foo()"> click me! </a>
See how the second click here causes a different alert?看看第二次点击这里是如何引起不同的警报的? In your case you're replacing the function with a string instead of a function, causing a syntax error.在您的情况下,您用字符串而不是函数替换函数,从而导致语法错误。 Don't forget to var
your variables.不要忘了var
的变量。
var login=document.getElementById('userName').value;
var pass=document.getElementById('password').value;
The snippet tests your logic and there was a console error for your login and pass variables.该代码段测试您的逻辑,并且您的登录和传递变量出现控制台错误。 I set them as 'var' and put your success logic in the 'error' section of the ajax request since I cannot reach your server, but it does create the logout button.我将它们设置为“var”并将您的成功逻辑放在 ajax 请求的“错误”部分,因为我无法访问您的服务器,但它确实创建了注销按钮。 Is that what you wanted?那是你想要的吗?
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.