如何使這個jquery請求？

Question

我正在嘗試做一個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 

jquery的AJAX：

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

}）;

數據得到存儲，除了它是不是通過Ajax發生，我在顯示頁面得到一個錯誤"undefined method 'name' for nil:NilClass"

編輯1：

<%= 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 %> 

編輯2： 路由文件：

root 'posts#index' 
    resources :posts 

show.html.erb

Name: <%= @post.name %> 
    Comment: <%= @post.comment %> 

控制器已腳手架。 format.json { render :show, status: :created, location: @post }附帶支架。

添加代碼爲高清節目後，我的節目頁的作品。但這個帖子並沒有通過ajax發生。

Answer 1

以下是我會做：

#app/controllers/posts_controller.rb 
class PostsController < ApplicationController 
    def index 
     @posts = Post.all 
    end 

    def new 
     @post = Post.new 
    end 

    def create 
     @post = Post.new post_params 

     respond_to do |format| 
     if @post.save #-> this is your code, I haven't changed it much 
      format.html { redirect_to @post, notice: 'Post was successfully created.' } 
      format.json { render :show, status: :created } 
     else 
      format.html { render :new } 
      format.json { render json: @post.errors, status: :unprocessable_entity } 
     end 
     end 
    end 

    private 

    def post_params 
     params.require(:post).permit(:name, :comment) 
    end 
end 

而且前端：

#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 %> 

有幾個問題與您的實現：

---

1 。提交

您的第一個問題是您將請求綁定到提交按鈕。

雖然這看起來可行，但真正的做法是綁定到提交事件：$.on("submit"。

這意味着您必須綁定到表格，從中您可以使用serialize函數對輸入的數據進行整理。

-

2.數據

其次，你設置自己的數據。

雖然本身沒有問題（語法是正確的），但它對於您的應用程序沒有任何幫助。你基本上每次都會發送{name: 'value1', comment: 'value2'}。

你會是很多使用表單中的數據更好地設置數據。我用我的例子做到了這一點：{post: $(this).serialize()}，應該設置參數如下：

"post": 
    { 
    "name": [[name input]], 
    "comment": [[comment input]] 
    } 

-

3.阿賈克斯

最後，你肯定你想用Ajax做到這一點？

Ajax的代表甲同步Ĵ avascript 一個 ND X ML - 這意味着你可以發送以外的 「正常」 範圍請求HTTP。

雖然你完全可以自由地做到這一點，但在這種情況下我沒有看到它的好處嗎？

---

UJS

一個更好的辦法來處理這個功能是使用Rails UJS (unobtrusive javascript) driver。

這基本上結合預先格式化JS到你的HTML元素取決於一系列的添加data屬性：

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

你可以看到在此處詳細瞭解custom Rails UJS events。

---

評論

但後未通過Ajax發生。

這是由於您沒有通過您的系統發送正確的數據造成的。

我已經在第一組代碼中解決了這個問題 - 您最好將JS函數用於form#submit事件，並將序列化的數據傳遞給您的ajax。

當然，在這種情況下，您不必使用Ajax。

Answer 2

如果你的提交按鈕看起來是這樣的：

<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 

如果還是不行，請編輯您的問題，給我們你的節目看法和你的路由文件。