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コールが続いて自動的にリダイレクトされ、ブラウザページのリダイレクトではなくリダイレ​​クト先のページの内容がデータとして表示されます。

IMHOこれを処理する最善の方法は、JSONレスポンスとして意図を戻すことです。クライアント側JSは、成功/エラーのステータスに応じて何をすべきかを知っています。例えば

、あなたのコントローラで、次のようなものを返すことができます：

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

：

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: %{} 

を次に、クライアント側の呼び出しで、あなたのような何かを行うことができます