jQuery ajax post do przedstawienia żądania POST w Phoenix ram

Question

Chcemy wykorzystać nasze treści można edytować, korzystając z wygenerowanych tras z następujących w router.ex:

pipeline :browser do 
    plug :accepts, ["html"] 
    plug :fetch_session 
    plug :fetch_flash 
    plug :put_secure_browser_headers 
    end 

    pipeline :api do 
    plug :accepts, ["json"] 
    end 
    scope "/", TextEditor do 
    pipe_through :browser # Use the default browser stack 

    get "/", PageController, :index 
    resources "/posts", PostController 
    end 

i funkcje regulatora, a mianowicie utworzyć:

def create(conn, %{"post" => post_params}) do 
    changeset = Post.changeset(%Post{}, post_params) 

    case Repo.insert(changeset) do 
     {:ok, _post} -> 
     conn 
     |> put_flash(:info, "Post created successfully.") 
     |> redirect(to: post_path(conn, :index)) 
     {:error, changeset} -> 
     render(conn, "new.html", changeset: changeset) 
    end 
    end 

jednak nie chcemy, aby skorzystać z formularza wygenerowanego jesteśmy następnie próbuje przetestować to z dIV i jQuery metoda $ .post:

<div id="newPost" contenteditable="true">write here</div> 
<div id="button" class="btn btn-primary">Save</div> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#button").click(function() { 
    var post = $("#newPost").html(); 

    $.post("/posts/post", { title: post }) 
    .done(function() { 
     alert("Data Loaded: "); 
    }); 
    }); 
}); 
</script> 

Jednak nie otrzymujemy alertu ani żadnych danych wstawionych do naszej bazy danych. Czego nam brakuje?

EDYCJA: W potoku przeglądarki usunęliśmy wtyczkę do fałszowania z powodu błędu tokenu csrf.

Answer 1

Spróbuj wykonać następujące czynności:

$.post("/posts", { post: { title: post } }) 

Twój kontroler oczekuje parametry mają być zagnieżdżone pod klucz post

def create(conn, %{"post" => post_params}) do 

nie polecam robić tak, ale można zmienić kontroler :

def create(conn, %{} = post_params) do 

Aby wyszukać parametry bez korzenia post klawisz. Jednak posiadanie klucza post oznacza, że ​​można łatwo uzyskać dodatkowe parametry niezwiązane z formularzem.

Nie polecam też wyłączania sprawdzania CSRF. można przesłać z CSRF żeton łatwo poprzez przechowywanie go w znaczniku meta:

<meta name="csrf" content="<%= Plug.CSRFProtection.get_csrf_token() %>"> 

a następnie dodanie go jako nagłówek do żądania POST:

var csrf = document.querySelector("meta[name=csrf]").content; 

$.ajax({ 
    url: "/posts", 
    type: "post", 
    data: { 
     post: { title: post } }) 
    }, 
    headers: { 
     "X-CSRF-TOKEN": csrf 
    }, 
    dataType: "json", 
    success: function (data) { 
     console.log(data); 
    } 
});