Question

我有一个rails 5应用程序，我只是想尝试实现类似的按钮功能。在我的情况下，我正在做赞成票。当登录用户单击按钮时，它应该增加1.我正在为用户和管理员使用设计。

我的show.html.erb

<% if member_signed_in? %>
 <div class"movie-votes">
   <medium id="votes"><%= @movie.votes %> members like this film</medium>
   <button id="upvote" type="submit">I Like this Film</button>
 </div>

我的Ajax请求

"use strict";
console.log("loaded");
$(document).ready(function(){

 var member = $("member");
 var password = $("password");
$("#upvote").click(function() {
 console.log("clicked");
 var id = $(this).data("id");

$.ajax({
beforeSend: function(xhr) { xhr.setRequestHeader("Authorization", "Basic " + btoa(member + ":" + password)); },
   url: "/movies/votes",
  type: "POST",
  data: {
    member: "test@example.com",
    password: "password",
    id: id,
 votes: true
  },
  success: function() {
    var vote_counter = $("#votes");
    // console.log(vote_counter);
    var current_vote = parseInt($("#votes").html());
    vote_counter.html(current_vote + 1);
    alert(vote_counter);
  }
  })
 })
})

MoviesController

before_action :set_movies, only: [:show, :edit, :destroy, :update, :votes]

def votes
 @movie.update(votes: @movie.votes + 1)
end

private 

def set_movies
  @movie = Movie.find(params[:id])
end

我在localhost上打开控制台时遇到的错误。

loaded
clicked
jquery.self-660adc5….js?body=1:10246 POST http://localhost:3000/movies/votes 401 (Unauthorized)

点击“我喜欢这部电影”按钮后会发生这种情况。旁注，我现在禁用了turbolinks，因为这在过去一直是个问题。如果需要，这是我的GitHub

Answer 1

显然，问题是由身份验证引起的。除了身份验证之外，您的代码中仍然存在一些问题，例如

您没有将id的{{1}}传递给movie行动。
你的控制器假定votes在那里，因此试图找到电影，但它无法得到它。

在params[:id]代码中，在html代码中添加数据属性：

button

在<% if member_signed_in? %> <div class"movie-votes"> <medium id="votes"><%= @movie.votes %> members like this film</medium> <button data-movie="<%= @movie.id %>" id="upvote">I Like this Film</button> </div>代码中：

Ajax

PS：我不确定它是否是构建投票功能的正确方法。我建议使用像$(document).ready(function(){ var member = $("member"); var password = $("password"); // <-- this is the actual password you are passing here? $("#upvote").click(function() { var id = $(this).attr("data-movie"); $.ajax({ beforeSend: function(xhr) { xhr.setRequestHeader("Authorization", "Basic " + btoa(member + ":" + password)); }, url: "/movies/votes", type: "POST", data: { member: "test@example.com", password: "password", id: id, votes: true }, success: function() { var vote_counter = $("#votes"); // console.log(vote_counter); var current_vote = parseInt($("#votes").html()); vote_counter.html(current_vote + 1); alert(vote_counter); } }); }); });这样的宝石，它会更加整洁。

使用Rails的Ajax请求5应用程序获取错误401（未经授权）

1 个答案: