我有一个登录页面，我可以通过api获取用户名和密码。成功登录后，还会显示一条错误消息，说明如何删除。这是我的fiddle。帮助我成功后如何删除错误消息。如果密码错误，则会显示错误消息。
HTML
<form id="login">
<p class="text-danger d-none">Please enter a correct login and password.</p>
<div class="form-group pb-10">
<div class="input-group">
<div class="input-group-addon p-2">
<i class="fa fa-user icon"></i>
</div>
<input type="text" class="form-control" id="name" name="name" placeholder="Username" required>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon p-2">
<i class="fa fa-lock icon"></i>
</div>
<input type="password" class="form-control" id="password" name="password" placeholder="Password" required>
</div>
</div>
<div>
<button type="submit" class="btn float-right login-btn">Login</button>
</div>
</form>
脚本：
$(document).ready(function(){
localStorage.removeItem('role');
$(".login-error").hide();
$("#login").on("submit", function (e) {
e.preventDefault();
var form_data = $('#login').serialize();
var username=$("#name").val();
var pwd=$("#password").val();
$.ajax({
url: "https://api.myjson.com/bins/nl8a0",
type: "GET",
dataType: "json",
success: function (data) {
console.log(typeof(data));
var arr = data;
arr.forEach(function(obj) {
console.log('name: ' + obj.name);
console.log('password: ' + obj.role);
var pass=obj.password;
// var decryptedBytes = CryptoJS.AES.decrypt(obj.password, "password");
var bytes = CryptoJS.AES.decrypt(pass.toString(), 'password');
var plaintext = bytes.toString(CryptoJS.enc.Utf8);
var role=obj.role;
if(role=="User"){
if(username==obj.name && pwd==plaintext){
alert("New role");
}
else{
$("#login p").removeClass("d-none");
}
}
else{
if(username==obj.name && pwd==plaintext){
alert("Login succes");
}
else{
$("#login p").removeClass("d-none");
}
}
})
},
error: function(data) {
console.log(data);
}
});
});
});
答案 0 :(得分：1)
登录成功后，您错过了添加删除的类d-none。
$("#login p").addClass("d-none");
答案 1 :(得分：0)
您可以按ID分配消息容器，并使用该ID根据结果分配消息。
尝试以下代码：
工作小提琴：
https://jsfiddle.net/ao2sd6e0/
更新：
如您所见，我在id "message"标签 <p> 中添加了 <p class="text-danger d-none" id="message"></p> ，使其成为邮件的容器。使用该 id ，无论登录成功与否，我们都可以插入消息。
HTML
<div class="container mt-5">
<div class="d-flex justify-content-center mt-150 height-3 ">
<div class="p-2 text-white w25 shadow-left rounded-left bg-white">
<div class="d-flex justify-content-center">
<img class="img-height img-fluid mt-100" src="../img/logo.png" alt="">
</div>
<!-- <h1 class="text-center mt-90">SeedStalk</h1> -->
</div>
<div class="border-left nbrd w30 text-center p60 shadow-right rounded-right bg-white">
<form id="login">
<p class="text-danger" id="message"></p>
<div class="form-group pb-10">
<div class="input-group">
<div class="input-group-addon p-2">
<i class="fa fa-user icon"></i>
</div>
<input type="text" class="form-control" id="name" name="name" placeholder="Username" required>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon p-2">
<i class="fa fa-lock icon"></i>
</div>
<input type="password" class="form-control" id="password" name="password" placeholder="Password" required>
</div>
</div>
<div>
<button type="submit" class="btn float-right login-btn">Login</button>
</div>
</form>
</div>
</div>
<h6>
Username : admin<br>
Password : admin
</h6>
</div>
在Javascript中，我们可以使用具有 <p> HTML属性的 getElementById() 方法来设置要在.innerHTML标签中显示的消息。
document.getElementById（'message'）。innerHTML =“成功”
document.getElementById('message').innerHTML = "Please enter a correct login and password"
脚本
$(document).ready(function(){
localStorage.removeItem('role');
$(".login-error").hide();
$("#login").on("submit", function (e) {
e.preventDefault();
var form_data = $('#login').serialize();
var username=$("#name").val();
var pwd=$("#password").val();
$.ajax({
url: "https://api.myjson.com/bins/qt7fk",
type: "GET",
dataType: "json",
success: function (data) {
console.log(typeof(data));
// alert(JSON.stringify(data));
var arr = data;
arr.forEach(function(obj) {
console.log('name: ' + obj.name);
console.log('password: ' + obj.role);
var pass=obj.password;
var bytes = CryptoJS.AES.decrypt(pass.toString(), 'password');
var plaintext = bytes.toString(CryptoJS.enc.Utf8);
// alert(plaintext);
var role=obj.role;
if(role=="User"){
if(username==obj.name && pwd==plaintext){
alert("New role"); document.getElementById('message').innerHTML = ""
}
else{
document.getElementById('message').innerHTML = ""
}
}
else{
if(username==obj.name && pwd==plaintext){
alert("Login succes");
document.getElementById('message').innerHTML = " "
}
else{
document.getElementById('message').innerHTML = "Please enter a correct login and password"
}
}
})
},
error: function(data) {
console.log(data);
}
});
});
});