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

Question

我在页面顶部有一个简单的登录，允许用户输入代码 - 然后代码读取 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>

错误提示：

 <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();
        }
      );
        }
      }
   });
}); });

json 中的用户看起来像 {"user":[{"ID" : "001","name": "Zara Ali"}

因此，当用户输入 001 时，警报将显示该名称 如果用户不输入任何内容或输入无效代码，我希望显示错误消息。

非常感谢

Answer 1

我相信简单地使用 ajax 来获取 JSON 会更容易，因为它使您的代码更具可读性 - 以及缩进和换行符。下面应该可以工作，但不能在 Stack Overflow 本身上进行测试，因为它不允许 AJAX 请求。使用这个 jQuery 的原因是它有一些简洁的内置功能，并且因为它看起来可能是一个登录表单，你可能还想在网络上发布一些数据，这在以后使用 @ 会变得更容易987654321@.

$(document).ready(function(){
  
  $('#loginalert, #ErrorMessageAlert').hide();
  
  $("#loginbtn").click(function(event){
    // Every time you click the button, hide all alerts again
    $('#loginalert, #ErrorMessageAlert').hide();
  
    $.ajax({
      url: 'result.json',
      success: function(msg){
          for(var i = 0; i < msg.user.length; i++){
            if(msg.user[i].ID == id){
              $('#loginalert')
                  .html('<p> Welcome: ' + msg.user[i].name + '</p>')
                  .show();
            } else {
              $('#ErrorMessageAlert').show();
            }
          }
      }, 
      error: function(e){
        $('#ErrorMessageAlert').show();
      }
    });
    
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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>

<div class="alert alert-danger" id="ErrorMessageAlert" <strong>Error</strong>invalid</div>

这里的逻辑似乎也有点问题——你可以让多个用户在同一个地方同时登录吗？如果不是，那我们为什么要循环遍历结果？您应该只返回一个用户，而不是嵌套的。如果您现在返回多个用户，那么只会显示最后一个用户名，这很奇怪。我要么将您的 JSOn 更改为默认仅返回一个用户，要么将 javascript 修改为仅检查一个：

success: function(msg){
    if(msg.user[0] && msg.user[0].ID == id){
        $('#loginalert').html('<p> Welcome: ' + msg.user[0].name + '</p>').show();
    } else {
        $('#ErrorMessageAlert').show();
    }
}

不过，最主要的是结构。使用制表符、换行符和任何视觉信息来显示哪些步骤嵌套在其他步骤中，使您的代码一目了然。