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的情况下工作）。

在您的情况下，我认为您只需要results() ajax-aware提供ContentControllerSearchExtension功能。

首先在results()中重载Page_Controller。

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片段。

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