如何通过并使用AJAX的成功/失败响应

Question

我用AJAX替换了标准的服务器端表单。我让他们工作，但现在我想从服务器传递成功/错误消息，我可以在客户端使用。 我的客户AJAX代码：

var csrf = $('input.csrf').val(); 
$.ajax({ 
     url: '/unauthmessages', 
     type: 'post', 
     data: { message: { name: name, message: message } }, 
     headers: { 
        'X-CSRF-TOKEN': csrf 
       }, 
     dataType: 'json', 
     success: function (data) { 
        console.log(data); 
       } 
}) 

我控制器操作是：

def create(conn, %{"message" => message_params}) do 
    messageChangeset = Message.changeset(%Message{}, message_params) 
    case Repo.insert(messageChangeset) do 
     {:ok, _message} -> 
     conn 
     |> put_flash(:info, "Success") 
     |> redirect(to: "/us#vpageContactos") 
     {:error, messageChangeset} -> 
     vpage = "contactos" 
     render(conn, FabASA.PageView, "us.html", messageChangeset: messageChangeset, vpage: vpage) 
    end 
    end 

如何更改控制器/成功函数传递/使用成功/错误信息？

Answer 1

上面的渲染/重定向不起作用，因为AJAX会将响应内容视为简单的数据，这些数据将随成功/错误状态一起返回，而不是需要显示的页面。此外，重定向将被AJAX调用静静地跟随，并且您最终将看到您重定向到的页面的内容为数据而不是浏览器页面重定向。

恕我直言，处理这个问题的最佳方式是将您的意图作为JSON响应返回，客户端JS根据成功/错误状态知道该如何处理。

例如，你可以返回类似的控制器执行以下操作：

def create(conn, %{"message" => message_params}) do 
    messageChangeset = Message.changeset(%Message{}, message_params) 
    case Repo.insert(messageChangeset) do 
    {:ok, _message} -> 
     conn 
     |> put_flash(:info, "Success") 
     |> json(%{redirect_to: "/us#vpageContactos"}) 
    {:error, messageChangeset} -> 
     conn 
     |> put_status(:bad_request) 
     |> json(errors_in(changeset)) 
    end 
end 

# NOTE: The following should probably be in ErrorHelpers 
defp errors_in(%{errors: errors}) do 
    translated_errors = for {field, message} <- errors, into: %{}, do: {field, MyApp.ErrorHelpers.translate_error(message)} 
    %{errors: translated_errors} 
end 
defp errors_in(_), do: %{} 

然后，在您的客户端调用，你可以这样做：

var csrf = $('input.csrf').val(); 
$.ajax({ 
    url: '/unauthmessages', 
    type: 'post', 
    data: { message: { name: name, message: message } }, 
    headers: { 'X-CSRF-TOKEN': csrf }, 
    dataType: 'json', 
    success: function(data) { 
    window.location.href = data.redirect_to; 
    }, 
    error: function(xhr) { 
    var errors = xhr.responseJSON(); 
    // Show the errors to the client 
    } 
})