使用AJAX查询数据库并更新HTML上的项目列表

时间:2018-07-27 08:02:36

标签: javascript jquery ruby-on-rails ajax ruby-on-rails-5

我有一个页面,显示某个区域中的所有列表。提交过滤器表单后,参数将发送到控制器,该控制器根据用户过滤的参数查询数据库。我现在将其呈现为json,并想删除当前页面上的所有列表,然后仅添加与过滤器查询匹配的列表。

index.html.erb

<div>

     <%= form_for @listing, url: filter_listings_path, method: :get, remote: true do |f| %>
            <ul>
                <li><%= f.label :pool%><%= f.check_box :pool %></li>
                <li><%= f.label :gym %> <%= f.check_box :gym %></li>
                <li><%= f.label :hot_tub %> <%= f.check_box :hot_tub %></li>
                <li><%= f.label :free_parking %> <%= f.check_box :free_parking%></li>
            </ul>
            <%= submit_tag %>
     <% end %>


    <% @listings.each do |listing|%>
        <h3>Name: <%= listing.name %></h3>
        <p>Description: <%= listing.description %></p>
        <p>Host: <%= listing.user %></p>
    <% end %>


</div>

listings_controller.rb

class ListingsController < ApplicationController
    before_action :set_listing, only: [:show, :edit, :update, :destroy]
    before_action :authorize_user, only: [:edit, :update, :destroy]

    def index
        @listing = Listing.new
        @listings = Listing.all
    end

    .....

    def filter
        @listings = Listing.where(listing_params)
        respond_to do |format|
            format.json { render json: @listings }
        end
    end

    private

    def set_listing
        @listing = Listing.find(params[:id])
    end

    def authorize_user
        redirect_to listings_path if current_user != @listing.user
    end

    def listing_params
        params.require(:listing).permit(:pool, :hot_tub, :free_parking, :gym)
    end


end

我应该使用JS并将结果附加到页面上,还是呈现部分结果并将其加载回?我不确定响应AJAX表单提交并将其实际加载回页面的最佳方法。

0 个答案:

没有答案