AjaxBundle
1.0.0
這個套件提供了一個簡單的結構來運行 ajax 操作。對於每種操作（連結或表單），您必須在標記（ a 、 form ）中新增 data-toggle="ajax" 並在 update 屬性中指定要更新的容器的 id。
與作曲家：
在您的composer.json 檔案中新增以下行：
"troopers/ajax-bundle": "dev-master"
在 AppKernel.php 中聲明該套件：
public function registerBundles() {
$bundles = array(
[...]
new TroopersAjaxBundleTroopersAjaxBundle(),
[...]如果您已經安裝了我們的 AsseticInjectorBundle 套裝：
謝謝你，你對我們來說太棒了;)
它可能“正常工作”，但如果不能，您必須檢查 javascript ( injector="foot" ) 和樣式表 ( injector="head" ) 區塊中的注入器標籤。
normal方式只需在模板中載入ajax.js和ajax.css即可：
<!DOCTYPE html><html><head>...
{% block stylesheets %}<link rel="stylesheet" href="{{ asset('bundles/troopersajax/css/ajax.css') }}" />{% endblock %}</head><body>. ..
{% block javascripts %}<!-- 務必先載入 jquery --><script type="text/javascript" src="{{ asset('bundles/troopersajax/js/ajax.js') }} ">< /script>{% endblock %}</body></html><a href="ajaxCall" data-toggle="ajax" data-update="updater-container">Click me</a> <div id="updater-container">Here will stand the ajaxCall response</div>
<form action="ajaxAction" method="POST" data-toggle="ajax" data-update="updater-ajaxAction-container"> <input type="submit" value="Ok save me" /> </form> <div id="updater-ajaxAction-container">Here will stand the ajaxAction response</div>
<a data-toggle="ajax" data-form="#search" data-update="result-panel" data-update-strategy="append" href='your_url'> Show more </a>
如果連結包含 data-form 屬性，它將使用連結的屬性提交表單。
當輸入/選擇變更時，您可以自動傳送 ajax 請求來更新表單，只需新增資料屬性「data-refreshonchange」：
<select name="category" data-refreshonchange="true"><option value="transport">運輸</option><option value="struct">結構</option></select>
然後在控制器的操作中：
if ($request->query->get('novalidate', false) === false) {if ($form->isValid()) {// 表單有效} else {// 避免在 novalidate 時顯示錯誤$ form = $formFactory->createForm();$form->setData($user);
}
}由於某種原因，您不會刷新表單的某些部分（例如輸入類型=“文件”）。然後，新增資料屬性「data-ignoreonchange="$some_unique_id"」。
您可能已經注意到，您可以自動為 ajax 回應設定一個容器。實際上，您可以做一些其他功能：
data-update-strategy 屬性用於定義用於將 ajax 內容與已使用 data-update 屬性設定的容器整合的函數。因此，如果您願意，您可以告訴庫放置在之後、之前、附加、前置或自訂函數之後。請注意，預設行為是簡單地用 html 函數替換容器的內容。
讓我們舉個例子。如果您希望將 ajax 內容簡單地新增至容器的末尾，請使用以下程式碼：
<a href="ajaxCall" data-toggle="ajax" data-update="updater-container" data-update-strategy="append">Click me</a> <div id="updater-container">This sentence will stay here and the ajax content will be displayed just after</div>
預設情況下，當我們載入ajax內容時，會執行一個小效果：hide + fadeIn（如果容器不為空）hide + slipDown（如果容器為空）。如果此效果無法滿足您的需求，您可以透過填入 data-effect 屬性來設定自己的效果。例如 ：
<a href="ajaxCall" data-toggle="ajax" data-update="updater-container" data-effect="slideDown">Click me</a> <div id="updater-container">This container will be hidden, the ajax content will be placed here and then the slideDown function will be used to display this</div>
如果你不想要任何效果，你可以在連結（或目標）標籤上新增資料屬性 noEffect 。例如，在連結上：
<a href="ajaxCall" data-toggle="ajax" data-update="updater-container" data-noEffect=true>Click me, no effect</a> <div id="updater-container">This container will be hidden without any effect if you click</div>
或直接在目標上：
<a href="ajaxCall" data-toggle="ajax" data-update="updater-container">Click me, no effect</a> <a href="ajaxCall" data-toggle="ajax" data-update="updater-container" data-effect="fadeIn">Click me (fadeIn)</a> <div id="updater-container" data-noEffect=true>This container will be hidden with or without an effect, according by the link you choose</div>
在最後一個範例中，第一個連結將執行 ajax 調用，但由於目標容器上的 data-noEffect 而沒有任何效果，而第二個連結則由於其覆蓋將觸發淡入效果。
這是 ajax 功能家族中最年輕的一個，現在您只需在您決定的連結上添加 data-toogle="modal" 即可觸發引導模式：
<a href="ajaxCall" data-toogle="ajax-modal">Click me and the ajax result will pop in a beautiful popup</a>
這將「按原樣」工作，但為了具有很酷的外觀，您必須在模式內添加正確的標記。 Twitter Bootstrap 模式文件中的更多信息
AjaxBundle附帶一個預設載入器和一個覆蓋層。如果需要，您可以透過定義要在window.loader中使用的載入器標記來變更它
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>{% block title %}歡迎！ rel="stylesheet" href="{{ asset('bundles/troopersajax/css/ajax.css') }}" />{% endblock %}<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" /></head><body>{% block body %}{% endblock %}
{% 封鎖 JavaScript %}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script type="text/javascript ">window.loader = '<div id="canvasloader-container" style="display: none;"><img src="{{ asset('/img/loading.gif') }}" style="width : 80%; 填滿頂部: 15px;"/></div>';window.loaderOverlay = null;</script><script type="text/javascript" src="{{ asset('bundles/troopersajax/ js /ajax.js') }}"></script>{% endblock %}</body></html>此範例將告訴 ajax.js 使用/img/loading.gif並停用疊加層。
