Question

我希望我的高级搜索表单在提交后保留其表单字段值，因此我使用method = POST将表单更改为ajax。我的控制器仍然工作正常，我可以进行休息调用，并获得数据。

问题是我不知道如何使用ajax再次呈现页面。我不希望ajax与响应有任何关系，因为响应逻辑内置在advanced_search_order_table中。我只需要Ajax来重新加载advanced_search_orders_table。

<%= render "advanced_search_orders_form" %>
<div id="advanced_search_orders_table" class="fk-table ajax">
  <%= render "advanced_search_orders_table" %>
</div>

在advanced_search_orders_form.html.erb（仅限部分代码段）

中

form id="advancedSearchOrder" name="advancedSearchForm" value="advancedSearch" class=" search line" action="" onsubmit="return submitForm();">

<div class="advancedSearchFormField">
      <span class="advancedSearchFormlabel">Order Id</span>
      <%= text_area_tag('filters[order_id]',filter_params['order_id'],:rows=>10) %>
</div>

<div class="advancedSearchFormSelectField">
  <span class="advancedSearchFormlabel"> Order Sales Channel </span>

  <%= select_tag 'filters[order_sales_channel]',
                  options_for_select(
                          [["Web", "Web"], ["Phone", "Phone"]]
                  ),
                  selected: filter_params['order_sales_channel'],
                  multiple: true,
                  class: "advancedSearchFormSelectBox" %>
</div>

<input type="submit" class="advanced-search-btn" id="advancedSearchButton" name="advancedSearchButton" value="Search"/>

我已将submitForm定义为

function submitForm() {
    $.ajax({type:'POST',url: '', data:$('#advancedSearchOrder').serialize(), success: function(response) {
        /*Render advanced_search_orders_table here */
    }});

    return false;
}

Answer 1

只需使用JavaScript解析您的回复即可。基本上从表中删除行，然后为每个结果添加一行。你也可以添加一些不错的动画;）

另一种选择是使用已经呈现的包含数据的HTML页面来响应该AJAX调用，并且只需将表替换为新表（再次使用JavaScript）。我不知道哪个会表现得更好。

通过AJAX中的表单提交进行渲染

1 个答案: