尝试使用 JQuery 捕获日志失败和 404

Question

我正在为我的毕业项目开发一个 Web Spring MVC 4 应用程序，该应用程序应该连接 web 和 android 客户端。

我使用@RestController 帮助android 应用通过json 轻松通信。我正在尝试捕获连接失败，例如：404 在网络或移动应用程序中，即使在网络应用程序中，我也尝试通过 Ajax 与服务器进行几乎所有通信，希望让用户更加放松（进度条，实时信息提示...）但是，在使用来自 jQuery 的event.preventDefault() 之后，我无法在接下来的操作中克服它并且加载响应页面并保持看不见的国家/地区的问题之一！例如这里是我的登录页面示例：

login.js

jQuery(document).ready(function ($) {
    $("#login-form").submit(function (event) {
        //Do somthing...
        // Call login function
        logViaAjax(event);
        // Prevent the form from submitting via the browser.
        return false; //Or using event.preventDefault()
    });
});

// logViaAjax function
function logViaAjax(event) {
    var logObj = {};
    logObj["username"] = $("#username").val();
    logObj["password"] = $("#password").val();
    //the response
    $.ajax({
        type: "POST",
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        url: "/login",
        data: logObj,
        dataType: 'text',
        timeout: 10000,
    success: function (data) {
        if (data.indexOf("login-box") !== -1) {
            showLogFail();
        }else{
            window.location.reload();
            //I dont need to reload the page because this gives me login page again... May be if there is a way to get the URL from data!?
        }
    },
    error: function () {
        showWarning();
    }
    });

我正在使用Spring Security 4 来处理身份验证，我们知道它会为失败提供 url ex:/login?fail，如果成功则获取请求的页面，我最近知道它甚至在我的 ex @987654326 进入 loginUrl 之前就重定向了@。我尝试测试用户是否在服务器端登录并发送 json 响应，但这可能会导致在请求登录之前丢失页面。

我想我应该在 success: function() 中测试 jQuery 中加载的 url（但未显示）是否包含 ?fail，以通知用户更改日志或密码。否则，如果没有，用户需要的页面在后面收费，我需要的只是显示它。

---

更新

在这些小改动之后，我需要做的只是将页面保持在登录页面之外并重新显示它。请注意，此功能由 Spring Security 自动提供，但仍在后台运行。例如，当用户单击/messenger 时，应用程序将他重定向到/login 登录，如果他登录失败，它会给出/login?fail，但由于JQuery，这个页面是看不见的，否则他成功登录它会将他发送到/messenger再次……

Answer 1

试试这个

var flag;
jQuery(document).ready(function ($) {
    $("#login-form").submit(function (event) {
        //Do somthing...
        // Call login function
        logViaAjax(event);
        if(flag.status == 404){
            return false;
        }
    });
});


function logViaAjax(event) {
    var logObj = {};
    logObj["username"] = $("#username").val();
    logObj["password"] = $("#password").val();
    //the response
    flag = $.ajax({
        type: "POST",
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        url: "/login",
        data: logObj,
        dataType: 'text',
        timeout: 10000,
        success: function (data) {
            //Here to move to the page unseen if success and show error hint if it fail...
        },
        error: function () {
            showWarning(); //Show error alerts, this part is DONE!
        }
    });

所做的更改

► 将 AJAX 分配给变量并在 jQuery(document).ready 中添加条件

AJAX - The onreadystatechange Event

Demo Fiddle to show 404 error