Javascript Rails中的Ajax POST请求错误
我第一次尝试在simple Rails应用程序中实现Ajax,主要得益于本教程: 我的应用程序有一个特定的显示视图,我想在其中显示一个排行榜,其中显示一个用户列表及其记录,以及一个可以创建新用户/记录的表单 我希望通过Ajax实现这一点,但每次尝试提交Ajax请求时,我都会收到一个500错误,指向下面的JQuery行并抛出一条“加载资源失败”消息Javascript Rails中的Ajax POST请求错误,javascript,jquery,ruby-on-rails,ajax,Javascript,Jquery,Ruby On Rails,Ajax,我第一次尝试在simple Rails应用程序中实现Ajax,主要得益于本教程: 我的应用程序有一个特定的显示视图,我想在其中显示一个排行榜,其中显示一个用户列表及其记录,以及一个可以创建新用户/记录的表单 我希望通过Ajax实现这一点,但每次尝试提交Ajax请求时,我都会收到一个500错误,指向下面的JQuery行并抛出一条“加载资源失败”消息 xhr.send( ( options.hasContent && options.data ) || null ); 我尝试
xhr.send( ( options.hasContent && options.data ) || null );
我尝试过一些改变,但没有成功,包括在表单中使用remote:true和直接使用JQuery发出Ajax请求。你能给我指出这里潜在的问题吗?以下为相关代码:
排行榜\u控制器显示操作呈现相关排行榜
def show
@leaderboard = Leaderboard.find(params[:id])
@leaders = @leaderboard.leaders
@leader = Leader.new(persisted_time: @persisted_time)
end
排行榜/show.html.erb
<%= simple_form_for([@leaderboard, @leader], html: { class: 'form-inline', id:'leader-form' }) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<%= f.input :name, :label => false, :placeholder => "Your name here", :required => true, :autofocus => true %>
<%= f.input :record_time, :label => "Your record", input_html: {readonly: ''} %>
<%= f.button :submit %>
</div>
<% end %>
<ul>
<% @leaders.each do |leader| %>
<li>
<%= leader.name %> |
<strong>record: </strong><%= leader.record_time %> <br />
</li>
<% end %>
</ul>
<%= simple_form_for([@leaderboard, @leader],remote: true, html: { class: 'form-inline', id:'leader-form' }) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<%= f.input :name, :label => false, :placeholder => "Your name here", :required => true, :autofocus => true %>
<%= f.input :record_time, :label => "Your record", input_html: {readonly: ''} %>
<%= f.button :submit %>
</div>
<% end %>
<ul>
<% @leaders.each do |leader| %>
<li>
<%= leader.name %> |
<strong>record: </strong><%= leader.record_time %> <br />
</li>
<% end %>
</ul>
和路线
resources :leaderboards, shallow: true do
resources :leaders
end
$(function(){
return $("#your-form-id").on("ajax:success", function(e, data, status, xhr) {
e.preventDefault();
// success code
}).on("ajax:error", function(e, xhr, status, error) {
// error code
});
});
很明显,我对Ajax没有什么了解。如果你能给我指出正确的方向,我将不胜感激
这是我提交表单后在控制台中得到的输出
jquery.self-bd7ddd3….js?body=1:10255 POST http://localhost:3000/leaderboards/1/leaders 500 (Internal Server Error)
这将导致JQuery脚本中的这一行:
xhr.send( ( options.hasContent && options.data ) || null );
并生产:
Failed to load resource: the server responded with a status of 500 (Internal Server Error)
和服务器日志
Started POST "/leaderboards/1/leaders" for ::1 at 2016-11-28 21:42:24 +1100
Processing by LeadersController#create as JS
Parameters: {"utf8"=>"✓", "leader"=>{"name"=>"9089sdas8dds", "persisted_time"=>"5"}, "commit"=>"S", "leaderboard_id"=>"1"}
Leaderboard Load (0.5ms) SELECT "leaderboards".* FROM "leaderboards" WHERE "leaderboards"."id" = $1 LIMIT $2 [["id", 1], ["LIMIT", 1]]
CACHE (0.0ms) SELECT "leaderboards".* FROM "leaderboards" WHERE "leaderboards"."id" = $1 LIMIT $2 [["id", 1], ["LIMIT", 1]]
(0.2ms) BEGIN
Leaderboard Load (0.4ms) SELECT "leaderboards".* FROM "leaderboards" WHERE "leaderboards"."id" = $1 LIMIT $2 [["id", 1], ["LIMIT", 1]]
SQL (2.6ms) INSERT INTO "leaders" ("name", "persisted_time", "leaderboard_id", "created_at", "updated_at") VALUES ($1, $2, $3, $4, $5) RETURNING "id" [["name", "9089sdas8dds"], ["persisted_time", "5"], ["leaderboard_id", 1], ["created_at", 2016-11-28 10:42:24 UTC], ["updated_at", 2016-11-28 10:42:24 UTC]]
(2.2ms) COMMIT
Completed 201 Created in 15ms (Views: 0.8ms | ActiveRecord: 5.9ms)
Started POST "/leaderboards/1/leaders" for ::1 at 2016-11-28 21:42:27 +1100
Processing by LeadersController#create as JS
Parameters: {"utf8"=>"✓", "leader"=>{"name"=>"9089sdas8dds", "persisted_time"=>"5"}, "commit"=>"S", "leaderboard_id"=>"1"}
Leaderboard Load (0.5ms) SELECT "leaderboards".* FROM "leaderboards" WHERE "leaderboards"."id" = $1 LIMIT $2 [["id", 1], ["LIMIT", 1]]
CACHE (0.0ms) SELECT "leaderboards".* FROM "leaderboards" WHERE "leaderboards"."id" = $1 LIMIT $2 [["id", 1], ["LIMIT", 1]]
(0.7ms) BEGIN
Leaderboard Load (0.5ms) SELECT "leaderboards".* FROM "leaderboards" WHERE "leaderboards"."id" = $1 LIMIT $2 [["id", 1], ["LIMIT", 1]]
SQL (1.9ms) INSERT INTO "leaders" ("name", "persisted_time", "leaderboard_id", "created_at", "updated_at") VALUES ($1, $2, $3, $4, $5) RETURNING "id" [["name", "9089sdas8dds"], ["persisted_time", "5"], ["leaderboard_id", 1], ["created_at", 2016-11-28 10:42:27 UTC], ["updated_at", 2016-11-28 10:42:27 UTC]]
(0.5ms) COMMIT
Completed 201 Created in 14ms (Views: 1.0ms | ActiveRecord: 4.2ms)
Started POST "/leaderboards/1/leaders" for ::1 at 2016-11-28 21:42:29 +1100
Processing by LeadersController#create as JS
Parameters: {"utf8"=>"✓", "leader"=>{"name"=>"9089sdas8dds", "persisted_time"=>"5"}, "commit"=>"S", "leaderboard_id"=>"1"}
Leaderboard Load (0.6ms) SELECT "leaderboards".* FROM "leaderboards" WHERE "leaderboards"."id" = $1 LIMIT $2 [["id", 1], ["LIMIT", 1]]
CACHE (0.0ms) SELECT "leaderboards".* FROM "leaderboards" WHERE "leaderboards"."id" = $1 LIMIT $2 [["id", 1], ["LIMIT", 1]]
(0.2ms) BEGIN
Leaderboard Load (0.6ms) SELECT "leaderboards".* FROM "leaderboards" WHERE "leaderboards"."id" = $1 LIMIT $2 [["id", 1], ["LIMIT", 1]]
SQL (2.3ms) INSERT INTO "leaders" ("name", "persisted_time", "leaderboard_id", "created_at", "updated_at") VALUES ($1, $2, $3, $4, $5) RETURNING "id" [["name", "9089sdas8dds"], ["persisted_time", "5"], ["leaderboard_id", 1], ["created_at", 2016-11-28 10:42:29 UTC], ["updated_at", 2016-11-28 10:42:29 UTC]]
(2.3ms) COMMIT
Completed 201 Created in 14ms (Views: 0.7ms | ActiveRecord: 6.0ms)
尝试添加
respond_to(:js)
在create方法的末尾
是的,请使用remote:true
尝试添加
respond_to(:js)
在create方法的末尾
是的,请使用
remote:true
请按以下方式更新您的代码
show.html.erb
<%= simple_form_for([@leaderboard, @leader], html: { class: 'form-inline', id:'leader-form' }) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<%= f.input :name, :label => false, :placeholder => "Your name here", :required => true, :autofocus => true %>
<%= f.input :record_time, :label => "Your record", input_html: {readonly: ''} %>
<%= f.button :submit %>
</div>
<% end %>
<ul>
<% @leaders.each do |leader| %>
<li>
<%= leader.name %> |
<strong>record: </strong><%= leader.record_time %> <br />
</li>
<% end %>
</ul>
<%= simple_form_for([@leaderboard, @leader],remote: true, html: { class: 'form-inline', id:'leader-form' }) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<%= f.input :name, :label => false, :placeholder => "Your name here", :required => true, :autofocus => true %>
<%= f.input :record_time, :label => "Your record", input_html: {readonly: ''} %>
<%= f.button :submit %>
</div>
<% end %>
<ul>
<% @leaders.each do |leader| %>
<li>
<%= leader.name %> |
<strong>record: </strong><%= leader.record_time %> <br />
</li>
<% end %>
</ul>
assets/javascripts/leaders.js
resources :leaderboards, shallow: true do
resources :leaders
end
$(function(){
return $("#your-form-id").on("ajax:success", function(e, data, status, xhr) {
e.preventDefault();
// success code
}).on("ajax:error", function(e, xhr, status, error) {
// error code
});
});
请更新您的代码如下 show.html.erb
<%= simple_form_for([@leaderboard, @leader], html: { class: 'form-inline', id:'leader-form' }) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<%= f.input :name, :label => false, :placeholder => "Your name here", :required => true, :autofocus => true %>
<%= f.input :record_time, :label => "Your record", input_html: {readonly: ''} %>
<%= f.button :submit %>
</div>
<% end %>
<ul>
<% @leaders.each do |leader| %>
<li>
<%= leader.name %> |
<strong>record: </strong><%= leader.record_time %> <br />
</li>
<% end %>
</ul>
<%= simple_form_for([@leaderboard, @leader],remote: true, html: { class: 'form-inline', id:'leader-form' }) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<%= f.input :name, :label => false, :placeholder => "Your name here", :required => true, :autofocus => true %>
<%= f.input :record_time, :label => "Your record", input_html: {readonly: ''} %>
<%= f.button :submit %>
</div>
<% end %>
<ul>
<% @leaders.each do |leader| %>
<li>
<%= leader.name %> |
<strong>record: </strong><%= leader.record_time %> <br />
</li>
<% end %>
</ul>
assets/javascripts/leaders.js
resources :leaderboards, shallow: true do
resources :leaders
end
$(function(){
return $("#your-form-id").on("ajax:success", function(e, data, status, xhr) {
e.preventDefault();
// success code
}).on("ajax:error", function(e, xhr, status, error) {
// error code
});
});
感谢Fallenhero,不幸的是更改create方法并没有帮助。似乎请求甚至没有达到方法。如前所述,我还尝试在表单中包含remote:true,但问题仍然存在。然后请说明您收到的错误消息。我收到的错误与我问题中发布的错误相同。我将更新问题,以包括控制台中的输出,以获取有关错误的更多信息。我知道我将在上面发布它们。如果控制器中有错误,请发布完整的代码谢谢Fallenhero,很遗憾,更改create方法没有帮助。似乎请求甚至没有达到方法。如前所述,我还尝试在表单中包含remote:true,但问题仍然存在。然后请说明您收到的错误消息。我收到的错误与我问题中发布的错误相同。我将更新问题,以包括控制台中的输出,以获取有关错误的更多信息。我知道我将在上面发布它们。如果控制器中有错误,请发布完整的代码谢谢Hardik。我尝试了你的建议,但不幸的是,当我点击submit按钮时,又出现了同样的错误(如上所述)。还有其他线索吗?我能看看你的回溯吗?对不起,哈迪克,我只是个编程新手。我不知道如何与你分享。如果你能指导我,我很乐意。我不知道在哪里可以找到更多的信息。您能给我指一下正确的方向吗?在您的终端上,rails服务器运行的同一选项卡上,谢谢Hardik。我尝试了你的建议,但不幸的是,当我点击submit按钮时,又出现了同样的错误(如上所述)。还有其他线索吗?我能看看你的回溯吗?对不起,哈迪克,我只是个编程新手。我不知道如何与你分享。如果你能指导我,我很乐意。我不知道在哪里可以找到更多的信息。您能告诉我正确的方向吗?在您的终端上,rails服务器运行的同一选项卡上