Javascript 单击时在警报中显示json文件

我在页面顶部有一个简单的登录，允许用户输入代码——然后代码读取json文件并调出该代码的特定用户。我确实在警报中显示了它，但是我希望在用户输入代码之前隐藏警报，并在代码有效时显示警报。在我的json文件中，我有用户代码（当前名为id），输入该代码后，他们的名称将显示在警报框中。如果代码显示中没有任何内容或无效代码，我希望显示错误警报。 这就是我到目前为止所做的：

登录文本按钮：

<div class="alert alert-info"><input type="text" id="userName" value> <button type="button" id="loginbtn" class="btn btn-primary btn-md">Login</button></div>

登录

欢迎/登录警报：

 <div class="alert alert-success" id="loginalert"<strong>Welcome</strong></div>

---

我相信简单地使用ajax获取JSON会更容易，因为它使您的代码更具可读性，还有缩进和换行符。下面的方法应该可以工作，但不能在堆栈溢出本身上进行测试，因为它不允许AJAX请求。使用这段jQuery的原因是它有一些整洁的内置特性，而且因为这看起来可能是一个登录表单，所以您可能还想在web上发布一些数据，这对于以后使用
ajax
会更容易


$（文档）.ready（函数（）{
$（'#loginalert，#ErrorMessageAlert'）.hide（）；
$（“#登录”）。单击（函数（事件）{
//每次单击该按钮时，都会再次隐藏所有警报
$（'#loginalert，#ErrorMessageAlert'）.hide（）；
$.ajax({
url:'result.json'，
成功：功能（msg）{
对于（var i=0；i”）
.show（）；
}否则{
$（'#ErrorMessageAlert'）.show（）；
}
}
}, 
错误：函数（e）{
$（'#ErrorMessageAlert'）.show（）；
}
});
});
});

登录
你得到了什么错误？为什么不使用
$ajax
及其
error
和
success
函数来代替此
$。getJSON
位？我希望在用户没有输入任何内容或输入无效内容时出现错误-脚本无法工作。准备就绪后，两个警报都会显示，我希望它们隐藏，然后如果用户输入正确的id，则显示欢迎警报；如果没有显示或无效，则显示错误警报您没有关闭
loginalert
和
ErrorMessageAlert
的
标记。您复制了小提琴中的内容吗？在页面加载时，两者都不显示。但在尝试登录时，它会同时显示这两个信息，因为如果找不到有效id，if/else块将显示错误警报。正如@somethinghere所说，您需要找到一种方法，一次只允许一次登录，可能是在找到有效id时停止循环。我理解您的意思。我一直在尝试另一个脚本，它会在输入特定id后显示欢迎用户警报：$（document）.ready（function（）{//Hide alert when page loads$（“#loginalert”）.Hide（）；$（“#loginbtn”）。单击（function（event）{//console.log（“clicked login”）$。getJSON（'result.json'，function（jd）{var id=$（“#userName'）.val（）；//console.log（id）；用于（var i=0；当我隐藏错误消息并为此放置else if时，我将忽略此问题appear@laurajs我觉得你把这个复杂化了。我想告诉你不要使用jQuery来制作动画——只需使用类名和CSS转换，这样你的javascript逻辑就可以保持尽可能简单，并与视觉元素分离尽可能。例如，为什么没有一个
message
div，您可以在其中替换内容并添加一个类以正确设置其样式？然后使用上述脚本在成功或失败时简单地添加一个类和消息。
保持简单，愚蠢
（KISS）：）
 <div class="alert alert-danger" id="ErrorMessageAlert" <strong>Error</strong>invalid</div>

$(document).ready(function() {
$("#loginalert").hide();    
$("#ErrorMessageAlert").hide();
$("#loginbtn").click(function(event){
$.getJSON('result.json', function(jd) {
      var id = $('#userName').val();
      for (var i=0; i<jd.user.length; i++) {
        if (jd.user[i].ID == id) {
          $('#loginalert').html('<p> Welcome: ' + jd.user[i].name + '</p>');      
            $("#loginalert").show();
        }else
        {
            $("#ErrorMessageAlert").show();
        }
      );
        }
      }
   });
}); });