Question

我是Rails的初学者，但我已经做了很多搜索，似乎无法找到帮助我的东西，因为我很难解决问题。我已经构建了一种工作方法，该方法从亚马逊请求有关书籍的信息，并且现在希望在用户将ISBN输入表单后使用它来自动填充有关该书的信息。这是我的方法（在我的listing.rb模型文件中）：

def self.isbn_lookup(val)
  request = Vacuum.new('US')
  request.configure(
  aws_access_key_id: 'access_key_here',
  aws_secret_access_key: 'secret_access_key_here', 
  associate_tag: 'associate_tag_here' 
)
  response = request.item_lookup(
    query: {
      'ItemId' => val,
      'SearchIndex' => 'Books',
      'IdType' => 'ISBN'
  },
    persistent: true
)
  fr = response.to_h #returns complete hash
  author = fr.dig("ItemLookupResponse","Items","Item","ItemAttributes","Author")
  title = fr.dig("ItemLookupResponse","Items","Item","ItemAttributes","Title")
  manufacturer = fr.dig("ItemLookupResponse","Items","Item","ItemAttributes","Manufacturer")
  url = fr.dig("ItemLookupResponse","Items","Item","ItemLinks","ItemLink",6,"URL")

    return {title: title, author: author, manufacturer: manufacturer, url: url}

  end

这是我的控制器。我不确定如何使这个通用，以便ISBN号依赖于用户输入的内容（它应该采用用户给出的值，而不是假设总是设置@isbn实例变量）：

def edit
  @isbn = Listing.isbn_lookup(1285741552)
end

这是我的_form.html.erb部分，我想称之为ISBN自动填充：

  <%= form_for(@listing, :html => {class: "form-horizontal" , role: "form"}, method: :get) do |f| %>
<div class="form-group">
  <div class="control-label col-sm-2">
    <%= f.label :isbn, "ISBN" %>
  </div>
  <div class="col-sm-8">
    <%= f.text_field :isbn, id: "auto-isbn", class: "form-control" , placeholder: "ISBN (10 or 13 digits)", autofocus: true %>
  </div>
</div>
...
<% end %>

最后，这是我的JS，我认为应该是AJAX调用的开始：

 $(document).ready(function() {
  $(document).on('keyup','input#auto-isbn',function() {
    $.get(this.action, $(this).serialize(), null, "script");
    return false;
  });
});

如何制作，以便当用户输入ISBN时，我的应用会调用isbn_lookup方法，然后返回收集的信息？

Answer 1

首先，我会在您的lookup文件中创建一个routes.rb路径。这看起来像是：

resources :listings do 
  collection do 
    get :lookup
  end
end

哪个会给你：

lookup_listings GET    /listings/lookup(.:format)     listings#lookup

然后在lookup中创建listings_controller.rb操作，例如：

class ListingsController < ApplicationController

  ...

  def lookup
    @isbn_lookup_result = Listing.isbn_lookup(params[:isbn])
    render partial: 'isbn_lookup_result'
  end

  ...

end

当然，这需要您拥有一个_isbn_lookup_result.html.erb文件来访问/使用@isbn_lookup_result中的值。

然后，要从你的JS调用这个动作，做一些事情（完全披露，我使用coffeescript，所以我的普通JS技能有点生锈）：

$(document).ready(function() {
  @TIMEOUT = null

  $(document).on('keyup','input#auto-isbn',function() {
    clearTimeout(@TIMEOUT)
    @TIMEOUT = setTimeout(function(){
      var ajaxResponse = $.ajax({
        url: "listings/lookup",
        type: 'GET',
        data: {isbn: $('input#auto-isbn').val()}
      });
      ajaxResponse.success(function(data){
        # do stuff with your data response
        # perhaps something like:
        $('#isbn-lookup-results-container').html(data)
      });
    }, 500);
  });

});

这一位：

  clearTimeout(@TIMEOUT)
  @TIMEOUT = setTimeout(function(){
    ...
  }, 500);

在用户停止输入和调用ajax函数之间产生1/2秒的延迟。这样，只有当用户在键入时暂停时，您才会在每个 keyup上进行查找。

这一位：

var ajaxResponse = $.ajax({
  url: "listings/lookup",
  type: 'GET',
  data: {isbn: $('input#auto-isbn').val()}
});

是AJAX调用。您可以看到正在使用的新listings/lookup路径。 data: {isbn: $('input#auto-isbn').val()}位会为您提供params[:isbn]，用于lookup操作。

然后，一旦成功，您可以使用此位对您的回复做一些事情：

ajaxResponse.success(function(data){
  # do stuff with your data response
  # perhaps something like:
  $('#isbn-lookup-results-container').html(data)
});

在这种情况下，data是render partial:调用产生的HTML，因此可以将其加载到div。

使用方法调用Amazon API进行动态更新

1 个答案: