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

如何使用AJAX传递和使用成功/失败响应

1 个答案: