javascript - 如何正确使用JQuery AJAX登录

Question

我正在尝试使用 JQuery 的验证插件来执行页面不必刷新的 AJAX 登录，经过数小时的试验和错误以及在网络搜索中的徒劳努力，我决定问一些SO专家。这是我目前的 JS 逻辑:

$(formEl).validate({
  rules: {
    email: {
      required: true,
      email: true
    },
    password: {
      required: true
    }
  },
  messages: {
    email: {
      required: 'Please enter your email address.'
    },
    password: {
      required: 'Please enter your password.'
    }
  },
  submitHandler: function(form) {
    $.ajax({
        url: form.action,
        type: form.method,
        data: $(form).serialize(),
        success: function(form) {
            // submit form
        },
        error: function() {
          // add custom jQuery validation error message stating a failure
        }

    });
  }
});

formEl.addEventListener('submit', function(ev) {
  ev.preventDefault();

});

和服务器端逻辑(PHP):

if($validation->passes()) {
 // log user in 
}else {
// echo response??
}

我想要完成的是，如果表单有效，将其发布到我的 php 脚本并愉快地登录，但如果无效，我希望页面不重新加载并在我的输入之一下抛出自定义 jQuery 验证错误消息。那么我是否应该在我的 else 子句中回显一条消息，该消息将返回到 submitHandler？ 请提建议!

Answer 1

要回答你的问题，是的，你应该从 else 发送一个 json 响应，然后在 success 回调中处理它并显示适当的错误在表格上。

编辑

php 代码会像这样改变:

if($validation->passes()) {
// log user in 
   $data = /** whatever you're serializing **/; // include "status" for successful login
}else {
 $data = /** whatever you're serializing **/; // include "status" for error
}
header('Content-Type: application/json');
return json_encode($data);

在 ajax 中你可以像这样改变 success

 success: function(data) {
        var status = data.status;
      // do things depending on status
    },