Silverstripe 前端搜索 Ajaxification

Question

我想在模式中显示默认的 SilverStripe 站点搜索框，然后在提交表单时希望在同一模式中显示搜索结果，而不是在页面上显示。 default search on front end 我按照创建页面类型的方法...

AjaxFormPage extends Page {}
class AjaxFormPage_Controller extends Page_Controller {}

1) 在这里我做了 init 方法来加载 jQuery.

2) 创建表单（基本上，来自 ContentControllerSearchExtension class 的相同搜索表单并粘贴到此处。

3) 还复制了 ContentControllerSearchExtension 的结果函数，如下所示：

public function resultsAjax($data, $form, $request) {
        //$this->request->isAjax()
        //Director::is_ajax()
        if (Director::is_ajax()) {
    $data = array(
        'Results' => $form->getResults(),
        'Query' => DBField::create_field('Text', $form->getSearchQuery()),
        'Title' => _t('SearchForm.SearchResults', 'Search Results')
    );
    return $this->owner->customise($data)->renderWith(array('Page_results', 'Page'));
        } else {
            return "Not Ajax";
        }
}

}

表单将转到以下 URL /new-ajax-form-page/SearchForm/?Search=asdasd&action_AjaxSubmit=Go

resultsAjax 方法

的每个参数都得到了以下警告 1、2 和 3

[Warning] Missing argument 1 for AjaxFormPage_Controller::resultsAjax(), called in /var/www/projects/xxxx/framework/view/ViewableData.php on line 466 and defined
GET /new-ajax-form-page/SearchForm/?Search=asdasd&action_AjaxSubmit=Go

Line 137 in /var/www/projects/xxxx/mysite/AjaxFormPage.php

[Warning] Missing argument 2 for AjaxFormPage_Controller::resultsAjax(), called in /var/www/projects/xxxx/framework/view/ViewableData.php on line 466 and defined
GET /new-ajax-form-page/SearchForm/?Search=asdasd&action_AjaxSubmit=Go

Line 137 in /var/www/projects/xxxx/mysite/AjaxFormPage.php

[Warning] Missing argument 3 for AjaxFormPage_Controller::resultsAjax(), called in /var/www/projects/xxxx/framework/view/ViewableData.php on line 466 and defined
GET /new-ajax-form-page/SearchForm/?Search=asdasd&action_AjaxSubmit=Go

Line 137 in /var/www/projects/xxxx/mysite/AjaxFormPage.php

任何帮助如何使其工作的帮助将不胜感激。

Answer 1

一般来说，您不应该在后端代码中注入太多关于 ajax 的问题。 ajax 表单应该与任何其他表单基本相同，除了在前端应用到它的行为。这有助于保持整个代码的一致性，并允许您的表单优雅地降级（即它们在没有 ajax 的情况下仍然可以工作）。

在你的情况下，我认为你只需要让 ContentControllerSearchExtension ajax 提供的 results() 函数感知。

首先在 Page_Controller 中重载 results()。

public function results($data, $form, $request) {
    $data = array(
        'Results' => $form->getResults(),
        'Query' => DBField::create_field('Text', $form->getSearchQuery()),
        'Title' => _t('SearchForm.SearchResults', 'Search Results')
    );
    return $this->owner->customise($data)->renderWith(array('Page_results', 'Page'));
}

现在，不再 return 使用完整模板，而是检查请求是否是 ajax，如果是，return 是部分模板。

public function results($data, $form, $request) {
    // ...

    if ($this->getRequest()->isAjax()) {
      return $this->customise($data)->renderWith('AjaxSearchResults');
    }

    return $this->owner->customise($data)->renderWith(array('Page_results', 'Page'));
}

其中 AjaxSearchResults.ss 是一个模板，仅包含您要注入模态 window.

的 HTML 片段

你的 JS 看起来像这样（请原谅我生疏 jQuery）：

$('.myForm').submit(e => {
  e.preventDefault();
  const data = $(this).serialize();
  const $form = $(this);
  $.ajax(
    $form.attr('action'),
    {    
      type: 'GET',
      data,
    } 
  })
  .done(response => {
    $('#some-div').html(response);
  });
);

相关：https://www.silverstripe.org/learn/lessons/ajax-behaviour-and-viewabledata

更新：要点：https://gist.github.com/unclecheese/dcb3777e929a429e906b8b5c9ffc9c0b

Silverstripe 前端搜索 Ajaxification

Silverstripe Front-end Search Ajaxification

silverstripe