UJS

Question

我正在尝试执行ajax请求。控制器中的代码：

popen

jquery ajax：

def new
    @post = Post.new
end

def show
end

def create
@post = Post.new(post_params)

respond_to do |format|
  if @post.save
    format.html { redirect_to @post, notice: 'Post was successfully created.' }
    format.json { render :show, status: :created, location: @post }
  else
    format.html { render :new }
    format.json { render json: @post.errors, status: :unprocessable_entity }
  end
end
end

}）;

数据正在存储，除非它没有通过ajax发生，我在显示页面中收到错误$(document).ready(function() { $('.submit').on('click', function(event){ $.ajax({ url: '/posts', type: 'POST', dataType: 'json', // data: {param1: 'value1'}, data: {name: 'value1', comment: 'value2'} }) })

编辑1：

"undefined method 'name' for nil:NilClass"

编辑2：路线档案：

<%= form_for(@post) do |f| %>
<%= f.label :name %><br>
<%= f.text_field :name %>

<%= f.label :comment %><br>
<%= f.text_field :comment %>
    <%= f.submit class: 'submit' %>
<% end %>

show.html.erb

 root 'posts#index'
  resources :posts

控制器已经搭建了脚手架。 Name: <%= @post.name %> Comment: <%= @post.comment %>来自脚手架。

在为def show添加代码后，我的显示页面正常工作。但这篇文章不是通过ajax发生的。

Answer 1

如果您的提交按钮如下所示：

<input class="submit" type="submit" value="Submit my form" />

（确保class="submit"是其中的一部分，因为这是您在jQuery调用中选择它的方式）

尝试：

$(function(){
  $('.submit').on('click', function(event){
    $.ajax({
      url: '/posts',
      type: 'POST',
      dataType: 'json',
      data: {name: 'value1', comment: 'value2'}
    });
    return false;
  });
})

注意最后的return false;会阻止正常提交以终止AJAX请求。

您在展示页面上显示的错误似乎与此无关，可能是由views/posts/show.erb的内容引起的。你应该提出一个新的问题。

更新：无论如何，我会对节目动作发表评论。它看起来不正确（即使我还没有看到你的节目页面）：

format.json { render :show, status: :created, location: @post }

您已经可以访问@post。我不知道location: @post应该做什么，你在视图中使用它吗？

如果我查看您的JavaScript，您就不会对AJAX请求中的JSON输出做任何事情。

此外，在控制器中，尝试：

def show
  @post = Post.find(params[:id])
end

如果这不起作用，请修改您的问题，并将您的节目视图和路线文件提供给我们。

Answer 2

以下是我的表现：

#app/assets/javascripts/application.js
$(document).on("submit", "#new_post", function(e){
   e.preventDefault();
   $.ajax({
      url: '/posts',
      type: 'POST',
      dataType: 'json',
      data: {post: $(this).serialize()},
      success: function(data) {
          alert(data);
      },
      error: function(data) { 
          alert(data);
      }   
   });
});

#app/views/posts/show.html.erb
Name <%= @post.name %>
Comment <%= @post.comment %>

前端：

$.on("submit"

您的实施存在以下几个问题：

<强> 1。提交

您的第一个问题是您将请求绑定到提交按钮。

虽然这似乎有效，但真正的方法是绑定到提交事件：{name: 'value1', comment: 'value2'}。

这意味着您必须绑定到表单，您才能使用serialize函数整理输入的数据。

-

<强> 2。数据

其次，您需要设置自己的数据。

虽然本身不是问题（语法是正确的），但它对您的应用程序没有任何作用。您基本上每次都发送{post: $(this).serialize()}。

您将 更好地使用表单中的数据更好地设置数据。我在我的示例中使用了"post": { "name": [[name input]], "comment": [[comment input]] }来完成此操作，它应该按如下方式设置参数：

data

-

<强> 3。 Ajax的

最后，您是否确定是否要使用Ajax执行此操作？

Ajax代表 A 同步 J avascript a nd X ML - 这意味着您可以向外发送请求＆＃34;正常＆＃34; HTTP的范围。

虽然你自由自在地做这件事，但在这种情况下我不会看到它的好处吗？

UJS

处理此功能的更好方法是使用Rails UJS (unobtrusive javascript) driver。

这基本上将预先格式化的JS绑定到HTML元素，具体取决于您添加的一系列#app/views/posts/new.html.erb <%= form_for @post, remote: true do |f| %> <%= f.label :name %><br> <%= f.text_field :name %> <%= f.label :comment %><br> <%= f.text_field :comment %> <%= f.submit class: 'submit' %> <% end %> #app/assets/javascripts/application.js $(document).on("ajax:success", "#new_post", function(data, status, xhr){ // success request });属性：

form#submit

您可以在此处查看有关custom Rails UJS events的更多信息。

如何制作这个jquery请求？

2 个答案:

UJS

评论