jquery - Phoenix框架中使用jquery ajax post提交POST请求

Question

我们希望使用可编辑的内容，利用生成的路由，并在 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

和 Controller 函数，即创建:

  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

但是我们不想使用生成的表单，然后我们尝试使用 div 和 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>

但是，我们没有收到警报或插入数据库的任何数据。我们还缺少什么？

编辑:在浏览器管道中，由于 csrf token 错误，我们删除了交叉伪造插件。

Answer 1

尝试以下操作:

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

您的 Controller 希望参数嵌套在 post 的键下

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

我不建议这样做，但您可以将 Controller 更改为:

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

在没有根 post 键的情况下查找参数。然而，拥有 post 键意味着您可以轻松拥有与表单无关的其他参数。

我也不建议禁用 CSRF 检查。您可以通过将 CSRF token 存储在元标记中来轻松提交:

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

然后将其作为 header 添加到您的发布请求中:

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