Silverstripe 前端搜索 Ajaxification

Question

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

AjaxFormPage extends Page {}
class AjaxFormPage_Controller extends Page_Controller {}

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

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

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-aware 提供的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'));
}

现在，不是返回完整模板，而是检查请求是否为 ajax，如果是，则返回部分模板。

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 是一个模板，其中仅包含您要注入模态窗口的 HTML 的 sn-p。

你的 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