README

JQueryAjaxBundleEnx for Symfony2. mabs/jquery-ajax-bundle的分支

安装

要在您的项目中安装此扩展包，请将以下行添加到composer.json文件中

json
"analyzer666/jquery-ajax-bundle-enx": "dev-master"

如何使用

准备使用Ajax...

###客户端

1. Twig：创建一些div，在Ajax请求发送到服务器之前显示，并在获取响应后隐藏

   

2. Twig：添加div以更新数据。此div的内容将被返回的数据替换

3. CSS：为此div添加CSS样式

   #ajax-loading {
   position: fixed; z-index: 1000; top: 0; left: 0; height: 100%; width: 100%; background-color:#c5523f; opacity: .8; display: none; }

   .ajax-loader { position: absolute; left: 50%; top: 50%; margin-left: -32px; /* -1 * image width / 2 / margin-top: -32px; / -1 * image height / 2 */ display: block;
   }

客户端的准备就绪。

###服务器端

1. 控制器：创建控制器以获取响应

   /**

   • @Route("/gallery/get/galleries/{category_id}", name="gallery_renderGalleries") */ public function getGalleriesAction($category_id = null) { $selectedCategory = $this->getDoctrine() ->getRepository('AppBundle:GalleryCategory') ->findOneById($category_id) ; $galleries = $selectedCategory->getGalleries(); if (count($galleries)>1) { return $this->render( 'default/gallery/render_galleries.html.twig', array( 'selectedCategory' => $selectedCategory, ) ); } elseif (count($galleries)==1) { return $this->getGalleryPhotosAction($galleries->first()->getId()); } }

服务器端的全部内容。

让我们使用Ajax！只需将以下代码插入到twig中

{{ ja_link({
    'update': '#galleries', 
    'url': url('gallery_renderGalleries', {'category_id':category.id}), 
	'text': 'Gallery',
    'after': set_after,
	'loading': '#ajax-loading'
}) }}

此代码为我们提供发送Ajax请求的工作链接。

<a href="http://127.0.0.1/aorig/app_dev.php/gallery/get/galleries/1"
	onclick="$.ajax({
 	url: 'http://127.0.0.1/aorig/app_dev.php/gallery/get/galleries/1',
    type: 'POST',
    dataType: 'html',
    beforeSend: function(){$('#ajax-loading').show(); },
    success: function( data ){ 
        $('#galleries').html(data); 
	    $('#ajax-loading').hide(); }
  	});	return false;">PhotoGallery</a>`

这是使用此插件的示例。

此扩展包添加了3个Twig函数

##1 - ja_request

生成发送Ajax请求的JavaScript代码

1. twig

   {{ ja_request({'update': '#reponse', 'url': path('new') }) }}

或者

{{ ja_request({
	'update': '#reponse', 
    'url': path('new'), 
    'after': 'alert("after");', 
    'before': 'alert("before");', 
    'complete': 'alert("complete");'  }) 
}}

=> html

$.ajax({ 
    url: "/app_dev.php/new", 
	type: "POST", 
    dataType: "html",
    beforeSend: function(){alert("before");},
    success: function( data ){$( "#reponse" ).html(data);alert("after");}
});

jQuery Ajax请求的选项

*    -$options['type']			: type: '...'; default - POST
*    -$options['dataType']      : dataType: '$dataType'; default - html 
*    +$options['url']           : url: "..."
*    -$options['before']        : beforeSend: function(){"..."}
*    +$options['update']        : success: function( data ){"...").html(data)
*    -$options['after']         : adding to the end of success:
*    -$options['complete']      : complete: function(){"..."}
*    -$options['loading']       : div id to show and hideand hide

##2 - ja_link

生成链接

twig

{{ ja_link({'update': '#reponse', 'url': path('new'), 'text': 'new link'  }) }}`

要添加点击确认操作，只需使用'confirm': true，默认文本为"你确定要执行此操作？"，如果要替换它，请使用'confirm_msg': "***"。

您还可以使用'before'和'after'参数来执行JS代码。让我们了解所有选项

链接元素的选项（《a href="https://github.com/analyzer666/JQueryAjaxEnxBundle/blob/HEAD/" rel="nofollow noindex noopener external ugc">/）

*   -$options['confirm']        : true-false:
*   -$options['confirm_msg']    : message to confirm ajax request
*   -$options['class']          : <a class="..."
*   -$options['id']             : <a id="..."
*   +$options['href']           : <a href="..."
*   +$options['text']           : <a>...</a>

=>

{{ ja_link({
    'update': '#photos', 
	'url': url('gallery_renderGalleryPhotos', {'gallery_id':gallery.id}), 
    'text': gallery.name,
	'after': unitegallery_function,
    'loading': 'ajax-loading'
}) }}

##3 - ja_button

按钮元素的选项

*   -$options['confirm']        : true-false:
*   -$options['confirm_msg']    : message to confirm request
*   -$options['class']          : <button class="..."
*   -$options['id']             : <button id="..."
*   -$options['type']           : <button type="..."
*   -$options['data-toggle']    : <button data-toggle="..."
*   -$options['data-target']    : <button data-target="..."
*   -$options['data-dismiss']   : <button data-dismiss="..."
*   -$options['aria-label']     : <button aria-label="..."
*   +$options['text']           : <button>...</button>
*   -$options['data']           : data: ...; 
    $(this.form.elements).serializeArray() for form submit

与ja_link函数中的jQuery选项相同

##许可证

此扩展包可在MIT许可证下使用。