Ajax读取json文件 实现表单登录验证

可以使用jQuery的Ajax方法来读取json文件，然后实现表单登录验证。以下是一个简单的例子：

HTML代码:

<form id="loginForm">
  <label>
    用户名:
    <input type="text" name="username">
  </label>
  <br>
  <label>
    密码:
    <input type="password" name="password">
  </label>
  <br>
  <input type="submit" value="登录">
</form>

JavaScript代码:

$(document).ready(function() {

  // 当表单提交时
  $('#loginForm').submit(function(event) {

    // 阻止表单默认提交行为
    event.preventDefault();

    // 获取表单数据
    var formData = {
      'username': $('input[name=username]').val(),
      'password': $('input[name=password]').val()
    };

    // 发送Ajax请求
    $.ajax({
      type: 'GET',
      url: 'users.json', // json文件的路径
      dataType: 'json',
      success: function(data) {
        var valid = false;
        $.each(data.users, function(index, user) {
          if (user.username === formData.username && user.password === formData.password) {
            valid = true;
            return false; // 跳出循环
          }
        });
        if (valid) {
          alert('登录成功！');
        } else {
          alert('用户名或密码错误！');
        }
      },
      error: function(jqXHR, textStatus, errorThrown) {
        alert('读取json文件错误：' + textStatus + ' - ' + errorThrown);
      }
    });

  });

});

其中，json文件格式类似于这样：

{
  "users": [
    {"username": "user1", "password": "password1"},
    {"username": "user2", "password": "password2"},
    {"username": "user3", "password": "password3"}
  ]
}

读取json文件后，遍历其中的用户，判断输入的用户名和密码是否匹配，如果匹配则提示登录成功，否则提示用户名或密码错误。