我有一个表单部分，我想用isbn_lookup_result部分替换。如何制作一个ajax请求来替换我在页面上的GET请求给出的结果？我看过this SO post，但它似乎不是我想要的。
以下是相关代码：
_form.html.erb（在视图＆gt;列表中）
<%= render "shared/errors", obj: @listing %>
<div class="row">
<div class="col-md-12">
<%= 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>
<div class="form-group">
<div class="control-label col-sm-2">
<%= f.label :title %>
</div>
<div class="col-sm-8">
<%= f.text_field :title , class: "form-control" , placeholder: "Title of book", autofocus: true %>
</div>
</div>
<div class="form-group">
<div class="control-label col-sm-2">
<%= f.label :condition %>
</div>
<div class="col-sm-8">
<%= f.text_field :condition , class: "form-control" , placeholder: "Book condition", autofocus: true %>
</div>
</div>
<div class="form-group">
<div class="control-label col-sm-2">
<%= f.label "Department(s)" %>
</div>
<div class="col-sm-8">
<%= f.collection_select(:category_ids, Category.all, :id, :name,{:"data-style" => "form-control", :"data-size" => "5"}, {class: "selectpicker", title: "Choose Department(s)", multiple: true}) %>
</div>
</div>
<div class="form-group">
<div class="control-label col-sm-2">
<%= f.label :price %>
</div>
<div class="col-sm-8">
<%= f.text_field :price , class: "form-control" , placeholder: "Price (in $USD)", autofocus: true %>
</div>
</div>
<div class="form-group">
<div class="control-label col-sm-2">
<%= f.label :description %>
</div>
<div class="col-sm-8">
<%= f.text_area :description , rows:8, class: "form-control", placeholder: "Description", autofocus: true %>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<%= f.submit class: "btn btn-primary btn-lg" %>
</div>
</div>
<%end%>
</div>
</div>
<div class="col-xs-4 col-xs-offset-4">
<%= link_to "Cancel request and return to listings page", listings_path %>
</div>
_isbn_lookup_result（在视图＆gt;列表中）
<%= 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>
<div class="form-group">
<div class="control-label col-sm-2">
<%= f.label :title %>
</div>
<div class="col-sm-8">
<%= f.text_field :title , class: "form-control" , placeholder: "Title of book", autofocus: true, id: "isbn-lookup-results-container" do %><%= @isbn_lookup_result[:title] %><% end %>
</div>
</div>
...
<% end %>
ISBN查找的当前方法，用于返回listing.rb文件中有关book的信息
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
listing_controller.rb中的查找操作
def lookup
@isbn_lookup_result = Listing.isbn_lookup(params[:isbn])
render partial: 'isbn_lookup_result'
end
尝试使用AJAX请求isbn_lookup.js文件（对jvillian大吼大叫，帮助我做到这一点）
$(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){
$('#isbn-lookup-results-container').html(data)
});
//ajaxResponse.error(function(data){
// Make an error div or something show up
//});
}, 500);
});
});
答案 0 :(得分：1)
执行此操作时：
$('#isbn-lookup-results-container').html(data)
没有任何事情会发生，因为您没有div id="isbn-lookup-results-container"。所以，你可能想做类似的事情：
<div class="row">
<div id="isbn-lookup-results-container" class="col-md-12">
...
</div>
</div>
在表单中，您多次执行autofocus: true次。只在表单加载时要在自动聚焦的字段上执行一次。
我想我会结束self.isbn_lookup包括isbn，例如：
return {title: title, author: author, manufacturer: manufacturer, url: url, isbn: val}
您的_isbn_lookup_result.html.erb看起来与_form.html.erb中的表单完全相同。你不想对isbn_lookup的结果做些什么吗？也许是这样的：
<%= 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)", value: @isbn_lookup_result[:isbn] %>
</div>
</div>
<div class="form-group">
<div class="control-label col-sm-2">
<%= f.label :title %>
</div>
<div class="col-sm-8">
<%= f.text_field :title , class: "form-control" , placeholder: "Title of book", value: @isbn_lookup_result[:title], autofocus: true %>
</div>
</div>
...
<%end%>
因此isbn和title的值会以新的形式显示。
您不能在任何地方使用author，manufacturer或url。这是你想要的吗？如果你不打算使用它们，将它们加载到你的hash似乎很奇怪。