我正在尝试使用AJAX请求在同一页面中加载数据来制作一个简单的应用程序。
这是.rb代码:
get '/' do
erb :index
end
post '/ssearch' do
if request.xhr?
keyword = params[:key]
items = extract_cse_info(keyword)
erb :ssearch, :locals => { 'items' => items }
else
erb :index
end
end
这是由layout.erb加载的.js文件
$(document).ready(function(){
$('.SR_title').hide();
$('#msg').hide();
$('.SR_box').hover(function(){
$(this).find('.SR_title').toggle().stop(true, true);
$(this).toggleClass('SR_box_hover');
});
$("#searchform").submit(function(){
var form = $("#searchform"),
term = form.find( "input[name='key']" ).val(),
url = form.attr("action");
$.ajax({
type: "POST",
url: url,
data: term,
success: function(msg){
$('#msg').html(msg);
}
});
});
这是index.erb代码
<div class="search">
<form method="POST" action="/ssearch" id="searchform">
<input id="search" type="search" name="key" autocomplete="on" placeholder="search qui..." />
<button class="submit" type="submit">Go!</button>
</form>
<div id="msg"></div>
</div>
和执行某些工作的ssearch.erb。
<% i = 1 %>
<% items["items"].each do |x| %>
<div class="SR_box">
<div class="SR_title">
<h5>Title</h5>
<a class="SR_box_fs fa fa-arrows-alt" href="#"></a>
</div>
<iframe class="iframe" src=<%= "#{x['link']}"%> sandbox="allow-same-origin, allow-top-navigation, allow-forms"></iframe>
</div>
<% end %>
当我得到/一切都OK,但是执行搜索时,什么也没有发生,浏览器仅显示表单,而没有在ssearch.erb中创建的框架。为什么?只是在提示下,我显示了一条服务器错误消息,内容为:
http:// localhost: 4567-> / ssearch NoMethodError-nil:NilClass:ssearch.erb:2:in'singletonclass'中的未定义方法'each'
哦,哦,问题很简单(现在)。
Sinatra不接受jquery ajax请求中'data:'参数中的变量,您必须以这种方式(在我的情况下)显式地编写:
data: { term: form.find("input[name='key']" ).val()},
而之前写道:
term = form.find( "input[name='key']" ).val(),
...
data: term,
然后我以这种方式修改.rb文件:
@keyword = params[:term]
puts "keyword is #{@keyword}"
@items = extract_cse_info(@keyword)
puts @items
erb :ssearch, :layout => false
现在我在七个天堂,我喜欢成为这种情绪的新手:)
再见
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句