utilizzando jQuery ajax post per presentare una richiesta POST a Phoenix quadro

Question

Vogliamo usare il nostro contenuto modificabile, approfittando dei percorsi generati con il seguente in 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 

e le funzioni del controller, vale a dire creare:

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 

Tuttavia non vogliamo utilizzare il modulo generato, stiamo quindi cercando di testare questo con div e il jquery metodo $ .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> 

Tuttavia non stiamo ricevendo l'avviso o eventuali dati inseriti nel nostro database. Cosa ci manca?

MODIFICA: nella pipeline del browser abbiamo rimosso il plug cross falso a causa di un errore di token csrf.

Answer 1

provare quanto segue:

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

Il controller si aspetta che i parametri da nidificati sotto una chiave di post

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

non mi consiglia di farlo, ma è possibile modificare il controller a :

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

Per cercare i parametri senza la radice post chiave. Tuttavia avere la chiave post significa che puoi avere parametri aggiuntivi non correlati al modulo facilmente.

Inoltre non consiglierei di disabilitare il controllo CSRF. Puoi inviare con la CSRF Token facilmente riporlo in un meta tag:

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

E poi aggiungerlo come intestazione alla richiesta posta:

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