Как сделать этот запрос 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 

показать.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 . Отправить

Ваша первая проблема заключается в том, что вы связываете запросы с кнопкой submit.

Несмотря на то, что это будет работать, верный способ сделать это - связать с отправить событие: $.on("submit".

Это означает, что вы должны привязать к форме , из которой вы сможете сопоставить введенные данные с помощью функции serialize.

-

2. Данные

Во-вторых, вы устанавливаете свои собственные данные.

Несмотря на то, что проблема не является проблемой (синтаксис верен), он ничего не делает для вашего приложения. Вы в основном отправляете {name: 'value1', comment: 'value2'} каждый раз.

Вы будете много лучше установить данные, используя данные из формы. Я сделал это в моем примере с помощью: {post: $(this).serialize()}, который должен установить параметры следующим образом:

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

-

3. Ajax

Наконец, ты уверен вы хотите сделать это с помощью Ajax?

Ajax означает синхронного J avascript й 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)

Try:

$(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, вы ничего не делаете с выходом JSON по запросу AJAX.

Кроме того, в контроллере, попробуйте:

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

Если это не работает, редактировать свой вопрос и дать нам свое мнение и показать файл маршрутов.