如何正确使用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吗？建议如下！

- Jared Garcia

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

- Nitesh Verma

---

你能提供一个例子展示该逻辑应该如何在回答中呈现吗？当然要使用我问题中的代码。 - Jared Garcia

我修改了我的回答，请检查一下。 - Nitesh Verma