Использование jQuery ajax post для отправки запроса POST в Phoenix Framework

Мы хотим использовать наш контент для редактирования, воспользовавшись сгенерированными маршрутами с помощью следующего в 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

и функции контроллера, а именно:

  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

Однако мы не хотим использовать сгенерированную форму, тогда мы пытаемся проверить это с помощью divs и метода jquery $.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>

Однако мы не получаем предупреждение или какие-либо данные, вставленные в нашу базу данных. Что нам не хватает?

EDIT: в конвейере браузера мы удалили заглушку перекрестного подделки из-за ошибки токена csrf.

Ответ 1

Попробуйте следующее:

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

Контроллер ожидает, что параметры будут вложены под ключ post

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

Я бы не рекомендовал этого, но вы можете изменить свой контроллер на:

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

Искать параметры без ключа root post. Однако наличие ключа post означает, что вы можете легко иметь дополнительные параметры, не имеющие отношения к форме.

Я также не стал бы отказываться от проверки CSRF. Вы можете легко отправить с помощью токена CSRF, сохранив его в метатеге:

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

И затем добавив его в качестве заголовка для вашего почтового запроса:

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