Question

我是新手JavaScript和Jquery作为Rails的前端，我无法在显示页面上获取下一个按钮来加载下一个对象。任何人都可以看看我可能会出错的地方？提前致谢！以下是相关代码：

show.html.erb

<%= render 'layouts/header' %>

<% if @car %>
  <a href="#" class="js-next" data-id="<%=@car.id%>">Next Car</a>
  <h1 class="carMake"><%= @car.make %></h1>
  <h1 class="carModel"><%= @car.model %></h1>
  <p class="carYear"><%= @car.year %></p>
  <p class="carColor"><%= @car.color %></p>
<% end %>

<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
  $(".js-next").click(function(event) {
    event.preventDefault();
    var nextId = parseInt($(".js-next").attr("data-id")) + 1;
    $.get("/cars/" + nextId + ".json", function(data) {
      $(".carMake").text(data["make"]);
      $(".carModel").text(data["model"]);
      $(".carYear").text(data["year"]);
      $(".carColor").text(data["color"]);
      // re-set the id to current on the link
      $(".js-next").attr("data-id", data["id"]);
    });
  });
});
</script>

在汽车控制器中显示方法

  def show
    @car = Car.find(params[:id])
    respond_to do |format|
      format.html {render :show}
      format.json {render json: @car}
    end
  end

汽车序列化器

class CarSerializer < ActiveModel::Serializer
  attributes :id, :make, :model, :color, :year
end

点击下一个

时的终端响应

Started GET "/cars/8" for 127.0.0.1 at 2018-03-09 12:17:24 -0700
Processing by CarsController#show as HTML
  Parameters: {"id"=>"8"}
  Car Load (0.2ms)  SELECT  "cars".* FROM "cars" WHERE "cars"."id" = ? LIMIT ?  [["id", 8], ["LIMIT", 1]]
  CACHE Car Load (0.0ms)  SELECT  "cars".* FROM "cars" WHERE "cars"."id" = ? LIMIT ?  [["id", 8], ["LIMIT", 1]]
  Rendering cars/show.html.erb within layouts/application
  User Load (0.4ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "users"."id" ASC LIMIT ?  [["id", 1], ["LIMIT", 1]]
  Rendered layouts/_header.html.erb (6.5ms)
  Rendered cars/show.html.erb within layouts/application (13.7ms)
Completed 200 OK in 265ms (Views: 260.4ms | ActiveRecord: 0.7ms)

如果有任何其他代码段有助于诊断问题，请告知我们。谢谢！

Answer 1

一些改进：将 next-id 存储在下一个链接中。

public static void main(String... args) throws Exception {
    String testJson = "[{ \"1234\" : { \"name\" : \"dan\" } },{ \"5678\" : { \"name\" : \"mike\" } }]";

    ObjectMapper mapper = new ObjectMapper();
    SimpleModule module = new SimpleModule();
    module.addDeserializer(NameId.class, new MyDeserializer());
    mapper.registerModule(module);
    ArrayList<NameId> map = mapper.readValue(testJson.getBytes(), new TypeReference<List<NameId>>() {
    });
    for (NameId m : map) {
        System.out.println(m.id);
        System.out.println(m.name.name);
        System.out.println("----");
    }
}


@JsonDeserialize(contentUsing = MyDeserializer.class)
static class NameId {
     String id;
     Name name;
     //getter and setters
    }

static class Name {
     String name;
     //getter and setter
}

static class MyDeserializer extends JsonDeserializer<NameId> {

    @Override
    public NameId deserialize(JsonParser p, DeserializationContext ctxt)
            throws IOException, JsonProcessingException {
        JsonNode node = p.getCodec().readTree(p);
        Map.Entry<String, JsonNode> nodeData = node.fields().next();
        String id = nodeData.getKey();
        String name = nodeData.getValue().get("name").asText();
        Name nameObj = new Name();
        nameObj.name = name;
        NameId nameIdObj = new NameId();
        nameIdObj.name = nameObj;
        nameIdObj.id = id;
        return nameIdObj;
    }
}

脚本：

<a href="#" class="js-next" data-next-id="<%= @car.id + 1 %>">Next Car</a>

Answer 2

在这里找到我的问题的答案：

Uncaught ReferenceError: $ is not defined error in jQuery

我认识的新手错误，非常感谢帮助人员！

为什么我的下一个按钮仍然加载相同的对象？

2 个答案: