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

166

保罗·一月

我用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

如何更改控制器/成功功能以传递/使用成功/错误消息？

纳文·佩里斯（Navin Peiris）

上面的渲染/重定向不起作用，因为 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
  }
})

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。