Sử dụng bài jquery ajax để gửi một yêu cầu POST ở Phoenix Khung

Question

Chúng tôi muốn sử dụng nội dung của chúng tôi có thể chỉnh sửa, lợi dụng các tuyến đường tạo ra những điều sau đây 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 

và các chức năng điều khiển, cụ thể là tạo:

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 

Tuy nhiên chúng tôi không muốn sử dụng các hình thức tạo ra, chúng tôi đang cố gắng để sau đó kiểm tra điều này với divs và jquery phương pháp $ .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> 

Tuy nhiên chúng tôi không nhận được cảnh báo hoặc bất kỳ dữ liệu nào được chèn vào cơ sở dữ liệu của chúng tôi. Chúng ta đang thiếu gì?

EDIT: Trong đường dẫn trình duyệt, chúng tôi đã xóa plugin giả mạo chéo vì lỗi mã thông báo csrf.

Answer 1

Hãy thử như sau:

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

điều khiển của bạn hy vọng các thông số để được lồng vào nhau dưới một chìa khóa của post

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

tôi sẽ không khuyên bạn nên làm như vậy, nhưng bạn có thể thay đổi điều khiển của bạn để :

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

Để tìm thông số không có gốcPhím. Tuy nhiên, có phím post có nghĩa là bạn có thể có các thông số bổ sung không liên quan đến biểu mẫu một cách dễ dàng.

Tôi cũng sẽ không lưu ý việc vô hiệu hóa kiểm tra CSRF. Bạn có thể gửi với CSRF thẻ một cách dễ dàng bằng cách lưu trữ nó trong một thẻ meta:

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

Và sau đó thêm nó như là một tiêu đề bài yêu cầu của bạn:

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