我正在尝试使用ajax通过get请求发送数据,但是param似乎没有被发送。我有一个页面显示数据库中的随机项。您可以通过导航栏中的链接访问此页面。在此页面上有一个链接,允许您跳过当前项目以查找另一个随机项目,确保下一个项目不是用户刚刚查看的项目。
的routes.rb
get 'pending', to: 'items#pending'
查看
<%= link_to 'Skip', '', class: "btn btn-default btn-xs",
id: "skip-btn",
:'data-item-id' => @pending_item.id %>
控制器
def pending
@previous_pending_item_id = params[:id] || 0
@pending_items = Item.pending.where("items.id != ?", @previous_pending_item_id)
@pending_item = @pending_items.offset(rand @pending_items.count).first
respond_to do |format|
format.js
format.html
end
end
我已经回复了html和js,因为我正在使用导航栏链接的操作以及页面上的链接。页面上的链接是跳过按钮,它应该显示另一个随机项目。
sitewide.js.erb
$('#skip-btn').on('click', function () {
$.ajax({
data: {id: $(this).data("item-id")},
url: "/pending"
});
});
当我查看服务器时,日志是Started GET "/pending"...
,但没有提到正在发送的参数。我错过了什么?
我之所以使用ajax是因为我不希望在网址中显示param。
为了澄清我在访问此页面时需要url始终处于/ pending状态,并且没有params或其他:在url中标识的id。此页面应始终显示db的随机记录。我需要发送一个参数的唯一原因是确保即使它们是随机的,也不会连续重复记录。
答案 0 :(得分:1)
我认为您需要阻止默认链接操作:
$('#skip-btn').on('click', function (event) {
event.preventDefault();
...
});
答案 1 :(得分:1)
虽然可以按照您尝试的方式进行操作,但我认为值得指出的是,在GET请求中发送数据有点像反模式。那么为什么不以“正确”的方式去做呢!
将 routes.rb 更改为:
get 'pending/:id', to: 'items#pending'
并将 sitewide.js.erb 更改为:
$('#skip-btn').on('click', function () {
$.ajax({
url: "/pending/" + $(this).data("item-id")
});
});
答案 2 :(得分:1)
我希望您检查将查询发送到控制器的格式。以及您希望在前端接收的格式类型。
@register.filter
def imgsrc(user):
return 'myapp/{}_{}.jpg'.format(user.first_name, user.last_name)
在您的控制器中,您可能希望将其作为json对象传回。
$('#skip-btn').on('click', function (e) {
e.preventDefault();
$.ajax({
dataType: 'json', //This will ensure we are receiving a specific formatted response
data: {id: $(this).data("item-id")},
url: "/pending"
});
});
这样您就可以从响应中获取值并将其附加到您的页面。
同样,如果您期待回复def pending
#@previous_pending_item_id = params[:id] || 0
#No need to make it an instance variable
previous_pending_item_id = params[:id] || 0
#Same goes for pending_items. No need to make it a instance variable, unless you're using it somewhere else.
pending_items = Item.pending.where("items.id != ?", previous_pending_item_id)
@pending_item = pending_items.offset(rand pending_items.count).first
respond_to do |format|
format.js
format.html
format.json { render json: @pending_item.as_json }
end
end
或js
,请在您的ajax调用中提及。如果它确实有助于您解决问题,请告诉我。
更新
让我们在你的页面中说,它显示div中html
对象的数据,
@pending_item
当您向控制器发出ajax请求时,您希望div#pending_item显示新的随机pending_item。
<div id="pending_item">...</div>
在您的控制器中,您可以执行以下操作:
$('#skip-btn').on('click', function (e) {
e.preventDefault();
$.ajax({
dataType: 'html', //we'll receive a html partial from server
data: {id: $(this).data("item-id")},
url: "/pending",
success: function(res){
//We'll set the html of our div to the response html we got
$("#pending_item").html(res);
}
});
});
在您的部分档案中&#34; _pendint_item.html.erb&#34;您将访问您的实例变量@pending_item并显示数据
这会将响应作为html发送到服务器,并且您只会将div的html设置为此。
更新2
您的部分可能看起来像这样,或者只是想要显示您的待处理项目。要知道的是它将访问您在控制器方法中定义的相同实例变量format.html { render partial: 'pending_item', layout: false }
,除非您将@pending_item
传递给它。
locals
我建议您在ajax调用的成功回调中执行<div class="pending_item">
<h3><%= @pending_item.name %></h3>
<p><%= @pending_item.description %></p>
</div>
,以查看您从服务器返回的内容。