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的用户看起来像{＆＃34;用户＆＃34;：[{＆＃34; ID＆＃34; ：＆＃34; 001＆＃34;，＆＃34;姓名＆＃34;：＆＃34; Zara Ali＆＃34;}

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

非常感谢

Answer 1

我相信简单地使用ajax来获取JSON会更容易，因为它使你的代码更具可读性 - 以及缩进和换行符。下面应该可以工作但不能在Stack Overflow上测试，因为它不允许AJAX请求。使用这个jQuery的原因是它有一些简洁的内置功能，因为它看起来可能是一个登录表单，你可能也希望通过网络发布一些数据，这对以后的{{ {1}}。

ajax

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

逻辑中似乎也存在一些问题 - 你可以在同一个地方同时登录多个用户吗？如果没有，那么为什么我们循环结果呢？您应该只返回一个用户，而不是嵌套。如果你现在回来了多个用户，那么只会显示最后一个用户名，这很奇怪。我要么改变你的JSOn默认只返回一个用户，要么修改javascript只检查一个：

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

1 个答案: