Question

我无法让我的控制器在浏览器中正确呈现AJAX请求的结果。我使用指定的Include for Ajax请求收到正确的html响应，但它只能在我的浏览器控制台中看到。页面本身不呈现新内容。我错过了什么？

这是我用于搜索产品的简化控制器：

class ProductSearch_Controller extends Page_Controller {
  public function index(SS_HTTPRequest $request) {

    // external api request, parsing response, returning as ArrayList $units

    $return_data = array(
      'Products' => $units
    );

    if($request->isAjax()) {
      return $this->customise($return_data)->renderWith('SearchResults');
    } else {
      return $return_data;
    }
  }
}

index方法实际上从外部源获取json数据，解析它，然后将其传递给ArrayList $units，然后将其作为Products提供给模板。这是简化的ProductSearch.ss模板：

<section>
  <div class="container">
    <div class="productsearch__container">
      <aside>$SearchForm</aside>
      <main>
        <h2>Search Results</h2>
        <% include SearchResults %>
      </main>
    </div>
  </div>
</section>

这里是SearchResults模板包括：

<div class="product__container">
    <% loop $Products %>
      <a href="$URL" class="product">
        <h3>Unit $UnitNo</h3>
        <ul>
          <li>Price: $Lot_Price</li>
          <li>SQFT: $SQFT</li>
          <li>Bedrooms: $bedrooms_no</li>
          <li>Baths: $baths_no</li>
        </ul>
      </a>
    <% end_loop %>
</div>

这是我简化的javascript：

$("[name='example-filter-variable']").on('change', function(e) {
  e.preventDefault();
  var params = $( "#Form_SearchForm" ).serialize();
  $.get("url/example?" + params, function(data) {
    console.log("Data: " + data);
  });
});

触发ajax事件使用SearchResults.ss Include返回相应的响应，该命令在我的console.log（）输出中可见：

<div class="product__container">
      <a href="/homes/search/show/6/101" class="product">
        <h3>Unit 101</h3>
        <ul>
          <li>Price: </li>
          <li>SQFT: 1531</li>
          <li>Bedrooms: 2</li>
          <li>Baths: 2</li>
        </ul>
      </a>

      <a href="/homes/search/show/12/102" class="product">
        <h3>Unit 102</h3>
        <ul>
          <li>Price: </li>
          <li>SQFT: 1535</li>
          <li>Bedrooms: 2</li>
          <li>Baths: 2</li>
        </ul>
      </a>

    ... and so on

</div>

问题是模板实际上是在浏览器中呈现的。我做错了吗？

Answer 1

模板中的这一行：<% include SearchResults %>使您的模板包含SearchResults模板。

您的javascript中也没有任何内容可以将数据附加到DOM中。

试试这个模板：

<section>
  <div class="container">
    <div class="productsearch__container">
      <aside>$SearchForm</aside>
      <main>
        <h2>Search Results</h2>
        <div class="results"></div>
      </main>
    </div>
  </div>
</section>

用这个js：

$("[name='example-filter-variable']").on('change', function(e) {
  e.preventDefault();
  var params = $( "#Form_SearchForm" ).serialize();
  $.get("url/example?" + params, function(data) {
    console.log("Data: " + data);
    $(".results").append(data); // add something along these lines
  });
});

renderWith输出在控制台中可见，但不更新浏览器

1 个答案: