Javascript 从老式的post重定向到现代的ajax表单处理

到目前为止，我主要做的是旧式web表单处理：

• 如果数据有效，则在post后重定向
• 如果数据无效，则再次显示表单并显示错误

我想从传统的方式切换到现代的ajax表单提交方式

我看到客户端-服务器对话框传输状态的两种方式（post成功与否）：

HTTP状态代码

JSON数据

---

有没有一种通用的方法或者甚至是互联网标准来处理通过ajax提交表单的问题？

使用HTTP状态码是有限制的，也是不正确的

它是有限的，因为您基本上可以返回成功或失败，但没有详细信息（例如，多个字段失败…）

它是不正确的，因为它有定义良好的含义，其中没有一个适合于无效表单数据

---

使用JSON结果更有用，因为您可以在其中包含所有有意义的信息以供显示。

使用HTTP状态码是有限制的，也是不正确的

它是有限的，因为您基本上可以返回成功或失败，但没有详细信息（例如，多个字段失败…）

它是不正确的，因为它有定义良好的含义，其中没有一个适合于无效表单数据

---

在可以包含所有有意义的显示信息的地方使用JSON结果更有用。

通常的做法是发送HTTP代码和JSON负载，这可以是4xx代码的错误详细信息，或者在成功的情况下发送重定向URL。此外，在AJAX世界中，您不必重定向，只需停留在同一页面上（通常会向用户提供一些有关成功操作的反馈）

例如，在您的后端，您可以有

@post('/change-password')
if not-logged-in
    return { status: 403, message: "Please log in" }
if post[old-password] != user.password
    return { status: 400, message: "Please enter the correct password" }
user.change-password(post[new-password])
return { status: 200, redirectURL: '/home' }
// or to stay on the same page:
return { status: 200, message: "Password updated!" }

并在客户端像这样处理它：

    function success(json) {
        if(json.message)
            return showMessage(json.message)
        if(json.redirectURL)
            window.location.href = json.redirectURL
    }

    function error(xhr) {
        var json = xhr.responseJSON;
        showMessage(json.message)
    }

    $.ajax({
        type: 'post',
        url: '/change-password',
        data: {old-password: $(...).val(), new-password: $(...).val() },
        success: success,
        error: error
    });

---

通常的做法是发送HTTP代码和JSON负载，这可以是4xx代码的错误详细信息，或者在成功的情况下发送重定向URL。此外，在AJAX世界中，您不必重定向，只需停留在同一页面上（通常会向用户提供一些有关成功操作的反馈）

例如，在您的后端，您可以有

@post('/change-password')
if not-logged-in
    return { status: 403, message: "Please log in" }
if post[old-password] != user.password
    return { status: 400, message: "Please enter the correct password" }
user.change-password(post[new-password])
return { status: 200, redirectURL: '/home' }
// or to stay on the same page:
return { status: 200, message: "Password updated!" }

并在客户端像这样处理它：

    function success(json) {
        if(json.message)
            return showMessage(json.message)
        if(json.redirectURL)
            window.location.href = json.redirectURL
    }

    function error(xhr) {
        var json = xhr.responseJSON;
        showMessage(json.message)
    }

    $.ajax({
        type: 'post',
        url: '/change-password',
        data: {old-password: $(...).val(), new-password: $(...).val() },
        success: success,
        error: error
    });

---

解决方案1）在前端进行检查：最好是在页面中集成angularjs或其他UI框架，您可以在jquery中进行检查，但这将是可怕的代码。2） 使用Ajax提交表单内容，如果返回代码为4XX，则留在页面上，否则重定向。@Pierreemanuellallemant我到目前为止还没有使用AngularJS。这是怎么回事？服务器是否向AngularJS客户端发送html片段？如何将django与AngularJS集成？你是两个部分都做，还是像这样做一个胶水部分：？盖特利：你应该使用angular 1.4而不是2.0（完全不同）。在1.4中，渲染是100%前端。Angular是一个js库，您必须将其包括在内，您必须在

标记中放置“ng app='MyApplication'”，在body标记中放置“ng controller='MyController'”，并且在js代码中您必须创建MyApplication和MyController。在控制器中，您将执行的代码放入页面中，并且可以使用ng repeat等。。在html文件中。您应该尝试angularjs示例。解决方案1）在前端进行检查：最好是在页面中集成angularjs或其他UI框架，您可以在jquery中进行，但这将是可怕的代码。2） 使用Ajax提交表单内容，如果返回代码为4XX，则留在页面上，否则重定向。@Pierreemanuellallemant我到目前为止还没有使用AngularJS。这是怎么回事？服务器是否向AngularJS客户端发送html片段？如何将django与AngularJS集成？你是两个部分都做，还是像这样做一个胶水部分：？盖特利：你应该使用angular 1.4而不是2.0（完全不同）。在1.4中，渲染是100%前端。Angular是一个js库，您必须将其包括在内，您必须在

标记中放置“ng app='MyApplication'”，在body标记中放置“ng controller='MyController'”，并且在js代码中您必须创建MyApplication和MyController。在控制器中，您将执行的代码放入页面中，并且可以使用ng repeat等。。在html文件中。你应该试试angularjs的例子，我认为400403，事实上任何4xx和5xx代码在语义上都不适合这种情况。具体来说，403表示禁止，这很难代表这类问题。@Amit:为什么？如果有人没有登录，403是对“/更改密码”（或任何其他登录url）的自然响应。但问题是关于非法数据，而不是无效数据state@Amit：是的，http响应代码不能（也不能）精确描述每种可能的情况，但是在rest/ajax世界中，如果一个操作明显失败，那么发送200从概念上讲是错误的。在没有更好的选择的情况下，我们返回一些大致与环境匹配的内容（400=无效数据，403=必须登录等），并在JSON负载中提供失败的确切原因。问题根本不是关于休息。这是关于一个不引人注目的处理形式的职位（A-la SPA）。此外，即使在REST范例中，使用4xx错误代码也只会使客户端处理复杂化。例如，在您的代码中，您假设错误包括一个

响应JSON

，但是如果发生了真正的错误（即使是400错误的请求，当然还有任何其他错误），您将创建一个异常，并且不会显示任何消息。使用成功代码使生活变得更简单。您可以假设存在有效的JSON，并简单地按内容进行分支。具体来说，403表示禁止，这很难代表这类问题。@Amit:为什么？如果有人未登录，403是对“/更改密码”（或任何其他标志）的自然响应