# ajax更新組件 ## ajax組件更新頁面 ### 拉取部分更新 ajax請求返回后，將**mytime**部分呈現在`#myDiv`頁面上的元素內 ``` <div id="myDiv">{% partial 'mytime' %}</div> ``` - 方法1、使用`data-request-update`屬性返回 ``` <!-- Attributes API --> <button data-request="onRefreshTime" data-request-update="mytime: '#myDiv'"> Go </button> ``` - 方法2、使用JavaScript API的`update`配置選項： ``` <!-- JavaScript API --> $.request('onRefreshTime', { update: { mytime: '#myDiv' } }) ``` ### 組件更新使用方法 將應更新內容的定義指定為類似JSON的對象，其中： - 左側（鍵）是**組件名稱** - 右側（值）是要更新的**目標元素** 下面將請求`#myDiv`使用組件**mypartial**內容更新元素。 ``` mypartial: '#myDiv' ``` 多個組件用逗號分隔。 ``` firstpartial: '#myDiv', secondpartial: '#otherDiv' ``` 如果組件名稱包含斜杠或破折號，則在左側“加引號”很重要。 ``` 'folder/mypartial': '#myDiv', 'my-partial': '#myDiv' ``` 目標元素將始終在右側，因為它也可以是JavaScript中的HTML元素。 ``` mypartial: document.getElementById('myDiv') ``` ### 追加和前置內容到更新的地方 如果選擇器字符串前面帶有`@`符號，則將從服務器接收的內容添加到元素中，而不是替換現有內容。 ``` 'folder/append': '@#myDiv' ``` 如果選擇符字符串以`^`符號開頭，則內容將代替。 ``` 'folder/append': '^#myDiv' ``` ### 推送組件更新內容 - 推送的是操作的組件后的內容 以下示例將使用在**mypartial**部分中找到的內容更新ID為**myDiv**的頁面上的元素。該處理程序將調用呈現在PHP中的部分內容的方法。`onRefreshTime``renderPartial` ``` function onRefreshTime() { return [ '#myDiv' => $this->renderPartial('mypartial') ]; } ``` > \*\*注意：\*\*鍵名必須以標識符`#`或類`.`字符開頭才能觸發內容更新。 ### 后臺將數據傳遞給組件 - 使用`$this[]`頁面或布局內[PHP部分](https://octobercms.com/docs/cms/themes#php-section)。 - `$this->page[]`在[組件類](https://octobercms.com/docs/plugin/components#ajax-handlers)內部使用。 - 使用`$this->vars[]`在[后端區域](https://octobercms.com/docs/backend/controllers-ajax#ajax)。 這些示例將為每種情況的一部分提供**結果**變量： ``` // From page or layout PHP code section $this['result'] = 'Hello world!'; // From a component class $this->page['result'] = 'Hello world!'; // From a backend controller or widget $this->vars['result'] = 'Hello world!'; ``` 然后，可以使用Twig在以下部分中訪問此值： ``` <!-- Hello world! --> {{ result }} ```