Question

我的表单提交了两次，如下所示，这是由:remote=>true引起的。我需要使用ajax来获取plan_id，该值来自javascript。

Started POST "/users/sign_up" for 127.0.0.1 at 2018-08- 
29 13:31:04 +0900
Processing by Users::SignUpController#create as JSON
  Parameters: {"utf8"=>"✓", "user"=> 
{"deliveries_attributes"=>{"0"=>{"num"=>"1", 
"box_delivery_scheduled_on"=>"", 
"box_delivery_scheduled_range"=>""}}, 
"collects_attributes"=>{"0"=> 
{"box_collect_scheduled_on"=>"", 
"box_collect_scheduled_range"=>""}}, "last_name"=>"", 
"first_name"=>"", "last_name_kana"=>"", 
"first_name_kana"=>"", "birth(1i)"=>"", 
"birth(2i)"=>"", "birth(3i)"=>"", "zipcode"=>"", 
"prefecture"=>"", "address1"=>"", "address2"=>"", 
"building"=>"", "tel"=>"", "email"=>"", 
"email_confirmation"=>"", "credit_cards_attributes"=> 
{"0"=>{"number"=>"", "name"=>"", "exp_month"=>"", 
"exp_year"=>"", "last4"=>""}}, "password"=>" 
[FILTERED]", "password_confirmation"=>"[FILTERED]", 
"login_email"=>"123@gmail.com", "login_password"=>" 
[FILTERED]"}, "plan_id"=>"1"}
Plan Load (0.9ms)  SELECT  `plans`.* FROM `plans` WHERE 
`plans`.`deleted_at` IS NULL AND `plans`.`id` = 1 LIMIT 
 1
   User Load (0.7ms)  SELECT  `users`.* FROM `users` 
 WHERE `users`.`deleted_at` IS NULL AND `users`.`email` 
 = '123@gmail.com' ORDER BY `users`.`id` ASC LIMIT 1
   Completed 200 OK in 196ms (Views: 0.2ms | 
 ActiveRecord: 1.6ms)


Started POST "/users/sign_up" for 127.0.0.1 at 2018-08-29 13:31:04 +0900
Processing by Users::SignUpController#create as JS
  Parameters: {"utf8"=>"✓", "user"=> 
{"deliveries_attributes"=>{"0"=>{"num"=>"1", 
"box_delivery_scheduled_on"=>"", 
"box_delivery_scheduled_range"=>""}}, 
"collects_attributes"=>{"0"=> 
{"box_collect_scheduled_on"=>"", 
"box_collect_scheduled_range"=>""}}, "last_name"=>"", 
"first_name"=>"", "last_name_kana"=>"", 
"first_name_kana"=>"", "birth(1i)"=>"", 
"birth(2i)"=>"", 
"birth(3i)"=>"", "zipcode"=>"", "prefecture"=>"", 
"address1"=>"", "address2"=>"", "building"=>"", 
"tel"=>"", 
"email"=>"", "email_confirmation"=>"", 
"credit_cards_attributes"=>{"0"=>{"number"=>"", 
"name"=>"", 
"exp_month"=>"", "exp_year"=>"", "last4"=>""}}, 
"password"=>"[FILTERED]", "password_confirmation"=>" 
[FILTERED]", "login_email"=>"123@gmail.com", 
"login_password"=>"[FILTERED]"}, "commit"=>"ログインして 
確認へ進む"}

它触发了两次，即使我在表单中添加了remote: true。

我还检查了我的app/assets/javascripts/application.js.coffee

# = require jquery3                                                                                                                         
# = require jquery_ujs
# = require bootstrap-sprockets

并选中/layouts/application.html.slim

doctype html                                                                                                                                
html
  head
    = render 'layouts/meta_tags'
    = stylesheet_link_tag 'application', media: 'all'
    = javascript_include_tag 'application'
    = csrf_meta_tags
  body
    = render 'layouts/navbar'
    = render 'shared/flash'
    main.container
      = yield

这是我的表单代码

= form_for @user, url: users_sign_up_url, remote: true, html: { id: 
'users_sign_up_form' } do |f|                                           
  = render 'plan'              
  = f.fields_for :deliveries do |fd|
  .field                     
    = fd.label :num          
    = fd.select :num, (1..100).map { |n| ["#{n}", n] },{}, { id: 'js- 
    select-num' }
  .field
    = fd.label :box_delivery_scheduled
    = fd.select :box_delivery_scheduled_on, DateJaRange.new(Time.zone.now 
    + 1.day..Time.zone.now + 8.days)                   
    = fd.select: box_delivery_scheduled_range,Delivery.
    box_delivery_scheduled_ranges_i18n.invert
  = f.fields_for :collects do |fc|
  .field
    = fc.label :box_collect_scheduled
    = fc.select :box_collect_scheduled_on, DateJaRange.new(Time.zone.now + 
    3.days..Time.zone.now + 10.days)
    = fc.select :box_collect_scheduled_range,
    Collect.box_collect_scheduled_ranges_i18n.invert
  .row
    = f.label :email                                                                                                                          
    = f.text_field :login_email, as: :email
    p.error= show_errors(f.object, :login_email)
  .row
    = f.label :password          
    = f.password_field :login_password
    p.error= show_errors(f.object, :login_password)
  .row
    = f.submit 'ログインして確認へ進む', class: 'js-sign-up-btn'

导致这些重复请求的可能问题是什么？
我已经通过stackoverflow进行了大量搜索并尝试过，但是仍然无法解决问题。

Answer 1

remote: true将自动处理Ajax请求，这意味着将使用Ajax提交表单，并且不会重新加载页面。您不应在Javascript代码中触发任何其他自定义Ajax发布请求。

如果您希望在ajax请求返回响应时更新回调，则可以通过在请求的资源上呈现js视图来做到这一点，如以下示例所示：

https://blog.codeship.com/unobtrusive-javascript-via-ajax-rails/

Answer 2

您要发送两个提交表单的请求，一个是当您在表单中编写remote => true时，它将发出ajax请求，而您又绑定了一个ajax请求以提交表单，请从中删除remote => true form_for。

Ruby on Rails-由于Ajax

2 个答案: