在Phoenix Framework中使用jquery ajax post提交POST请求

前端之家收集整理的这篇文章主要介绍了在Phoenix Framework中使用jquery ajax post提交POST请求前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我们想使用我们的内容可编辑,利用生成的路由在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

然而,我们不想使用生成的表单,我们然后尝试使用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令牌错误,我们删除了交叉伪造插件.

解决方法

尝试以下:
$.post( "/posts",{ post: { title: post } })

您的控制器希望将参数嵌套在帖子的键下

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

我不建议这样做,但您可以将控制器更改为:

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

寻找没有根帖子的参数.但是具有邮政密钥意味着您可以轻松地添加与该表单无关的附加参数.

我也不建议停用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);
    }
});
原文链接:https://www.f2er.com/jquery/176386.html

猜你在找的jQuery相关文章