README

此仓库包含一个AjaxResponse实现，允许您在前端（javascript）和后端（PHP）轻松使用Ajax实现。

该组件依赖于Symfony2框架和JMS Serializer。

安装

获取仓库副本！

您可以使用composer加载此仓库

composer.phar require "bluetea/ajax-response-bundle" dev-master

如果您不使用composer，请使用GIT加载仓库

git clone https://github.com/BlueTeaNL/AjaxResponseBundle.git your-directory

将组件添加到AppKernel.php

new BlueTea\AjaxResponseBundle\BlueTeaAjaxResponseBundle(),

实现

此组件通过AjaxResponseListener自动在后端实现。前端实现应手动完成。

前端

首先，我们应该加载包括jQuery、jQuery-ui、Pnotify和BlockUI在内的javascript文件。

<!-- Javascript -->
<script src="Resources/public/vendor/jquery/dist/jquery.min.js"></script>
<script src="Resources/public/vendor/jquery-ui/ui/minified/jquery-ui.min.js"></script>
<script src="Resources/public/vendor/blockui/jquery.blockUI.js"></script>
<script src="Resources/public/vendor/pnotify/pnotify.core.js"></script>
<script src="Resources/public/vendor/pnotify/pnotify.buttons.js"></script>
<script src="Resources/public/vendor/pnotify/pnotify.callbacks.js"></script>
<script src="Resources/public/vendor/pnotify/pnotify.confirm.js"></script>
<script src="Resources/public/vendor/pnotify/pnotify.desktop.js"></script>
<script src="Resources/public/vendor/pnotify/pnotify.history.js"></script>
<script src="Resources/public/vendor/pnotify/pnotify.nonblock.js"></script>
<script src="Resources/public/vendor/pnotify/pnotify.reference.js"></script>
<script src="Resources/private/js/bluetea/ajaxProtocol.js"></script>
<script src="Resources/private/js/bluetea/arrayMerge.js"></script>
<script src="Resources/private/js/bluetea/blockUi.js"></script>
<script src="Resources/private/js/bluetea/bootstrapModal.js"></script>

<!-- Stylesheets -->
<link href="Resources/public/vendor/jquery-ui/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<link href="Resources/public/vendor/pnotify/pnotify.core.css" rel="stylesheet" type="text/css" />
<link href="Resources/public/vendor/pnotify/pnotify.buttons.css" rel="stylesheet" type="text/css" />
<link href="Resources/public/vendor/pnotify/pnotify.history.css" rel="stylesheet" type="text/css" />
<link href="Resources/public/vendor/pnotify/pnotify.picon.css" rel="stylesheet" type="text/css" />

或者使用assetic

{% javascripts combine=true
    '@BlueTeaAjaxResponseBundle/Resources/public/vendor/jquery/dist/jquery.min.js'
    '@BlueTeaAjaxResponseBundle/Resources/public/vendor/jquery-ui/ui/minified/jquery-ui.min.js'
    '@BlueTeaAjaxResponseBundle/Resources/public/vendor/blockui/jquery.blockUI.js'
    '@BlueTeaAjaxResponseBundle/Resources/public/vendor/pnotify/pnotify.core.js'
    '@BlueTeaAjaxResponseBundle/Resources/public/vendor/pnotify/pnotify.buttons.js'
    '@BlueTeaAjaxResponseBundle/Resources/public/vendor/pnotify/pnotify.callbacks.js'
    '@BlueTeaAjaxResponseBundle/Resources/public/vendor/pnotify/pnotify.confirm.js'
    '@BlueTeaAjaxResponseBundle/Resources/public/vendor/pnotify/pnotify.desktop.js'
    '@BlueTeaAjaxResponseBundle/Resources/public/vendor/pnotify/pnotify.history.js'
    '@BlueTeaAjaxResponseBundle/Resources/public/vendor/pnotify/pnotify.nonblock.js'
    '@BlueTeaAjaxResponseBundle/Resources/public/vendor/pnotify/pnotify.reference.js'
    '@BlueTeaAjaxResponseBundle/Resources/private/js/bluetea/ajaxProtocol.js'
    '@BlueTeaAjaxResponseBundle/Resources/private/js/bluetea/arrayMerge.js'
    '@BlueTeaAjaxResponseBundle/Resources/private/js/bluetea/blockUi.js'
    '@BlueTeaAjaxResponseBundle/Resources/private/js/bluetea/bootstrapModal.js'
%}
    <script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}

{% stylesheets filter="cssrewrite"
    '@BlueTeaAjaxResponseBundle/Resources/public/jquery-ui/themes/smoothness/jquery-ui.min.css" rel="stylesheet'
    '@BlueTeaAjaxResponseBundle/Resources/public/vendor/pnotify/pnotify.core.css'
    '@BlueTeaAjaxResponseBundle/Resources/public/vendor/pnotify/pnotify.buttons.css'
    '@BlueTeaAjaxResponseBundle/Resources/public/vendor/pnotify/pnotify.history.css'
    '@BlueTeaAjaxResponseBundle/Resources/public/vendor/pnotify/pnotify.picon.css'
%}
    <link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="screen" />
{% endstylesheets %}

然后初始化ajaxProtocol和blockUi小部件。

$(function () {
    $(document).ajaxProtocol();
    $(document).blockUi();
});

用法

后端

AjaxResponse重写了Response对象的构造函数。增加了两个附加参数：type和data。type是最重要的部分，因为它被ajaxProtocol.js用于确定预期的操作。例如：“modal”类型会打开一个模态。如果需要发送附加数据，则使用data参数。

实现了四种类型

• Modal：此类型会打开一个模态
• Redirect：此类型触发重定向
• Event：此类型触发一个可以被其他javascript文件捕获的javascript事件
• Data：这是默认类型，只是传递数据

AjaxResponse包含5个参数：content、type、data、status和headers。

return new AjaxResponse($content = '', $type = self::TYPE_DATA, $data = null, $status = 200, $headers = array())

content参数包含该类型的数据

• Modal类型：模态的HTML数据
• Redirect类型：URL
• Event类型：事件名称
• Data类型：数据

因此，如果您想向前端发送一个模态，您的代码应该像这样

return new AjaxResponse(
    $this->renderView('AcmeDemoBundle:Example:show.html.twig',
        $data
    ),
    AjaxResponse::TYPE_MODAL
);

如果您想在javascript中触发一个事件

return new AjaxResponse('your_event_name', AjaxResponse::TYPE_EVENT, $additional_data);

所有可能的AjaxResponse类型

// An empty response
return new AjaxResponse();

// Just some data
return new AjaxResponse($yourData);

// Trigger an javascript event
return new AjaxResponse('your_event_name', AjaxResponse::TYPE_EVENT, $optional_data);

// Redirect
return new AjaxResponse('http://your-url.com', AjaxResponse::TYPE_REDIRECT);

// Render Bootstrap modal
return new AjaxResponse('<html code>', AjaxResponse::TYPE_MODAL);

// Render Bootstrap modal with twig rendering
return new AjaxResponse($this->renderView('your-view', $data), AjaxResponse::TYPE_MODAL);

不要预先序列化数据。数据将由AjaxResponseListener序列化为JSON。

前端

您应该使用AjaxProtocol小部件来启用AjaxResponse的所有优势。AjaxProtocol小部件自动处理模态、重定向和事件触发。如果您想手动处理，请重写successCallback并在后端AjaxResponse对象中使用DATA类型。

所有选项

$(document).ajaxProtocol({
    url: null,
    data: null,
    type: 'POST',
    beforeSendCallback: function() { $(window).application('blockUI'); },
    readyCallback: function() { $(window).application('unblockUI'); },
    successCallback: function() {},
    failCallback: function() { bootbox.alert('Oh god! Something went terribly wrong :-('); }
});

仅调用URL。数据参数包含POST或GET参数，类型默认为“POST”，但可以设置为“GET”。beforeSendCallback是一个函数回调，在AJAX调用之前执行。successCallback是一个函数回调，在AJAX调用成功时执行。failCallback是一个函数回调，在AJAX调用失败时执行。

模态示例

$(document).ajaxProtocol("call", {url: url, type: 'GET'});

事件示例

$(document).ajaxProtocol("call", {url: url, type: 'GET'});

提交数据示例

$(document).ajaxProtocol("call", {url: url, type: 'POST', data: {foo: 'bar'});

使用dataTables的示例

"fnServerData": function ( sSource, aoData, fnCallback ) {
    $(document).ajaxProtocol("call", {
        url: sSource,
        data: aoData,
        type: 'GET',
        successCallback: function(data) { fnCallback(data) },
        beforeSendCallback: null // disable the blockUI by overriding this callback
    });
},