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 %}欢迎！{% endblock %}</title>{% block stylesheets %}<link rel="stylesheet" href="{{ asset('bundles/troopersajax/css/ajax.css') }}" />{% endblock %}<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" /></head><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并禁用叠加层。
