如何将 Ajax 与 Symfony2 集成

How to integrate Ajax with Symfony2

提问by Thomas Shelby

I'm looking form simple tutorial/example about ajax in symfony2, for beginner?

我正在为初学者寻找关于 symfony2 中 ajax 的简单教程/示例？

I have these examples:

我有这些例子：

• city.php: http://pastebin.com/Qm8LS5kh

• ajax_req.js: http://pastebin.com/UqJMad24

• index.html: http://pastebin.com/H1err4Yh

• city.php：http://pastebin.com/Qm8LS5kh

• ajax_req.js：http://pastebin.com/UqJMad24

• index.html：http: //pastebin.com/H1err4Yh

How can these be put into a Symfony2 app?

如何将这些放入 Symfony2 应用程序中？

回答by JeanValjean

It is easy. I will illustrate how to do an AJAX call in Symfony2 through 3 steps. For the following example, assume to use the jQuery library.

这很容易。我将通过 3 个步骤来说明如何在 Symfony2 中进行 AJAX 调用。对于以下示例，假设使用 jQuery 库。

• Define the route for the action that has to handle your AJAX call. E.g.

  AcmeHomeBundle_ajax_update_mydata:
    pattern:  /update/data/from/ajax/call
    defaults: { _controller: AcmeHomeBundle:MyAjax:updateData }
  

• Define the action in the MyAjaxcontroller from Homebundle. E.g.

  public function updateDataAction(){
    $request = $this->container->get('request');        
    $data1 = $request->query->get('data1');
    $data2 = $request->query->get('data2');
    ...
    //handle data
    ...
    //prepare the response, e.g.
    $response = array("code" => 100, "success" => true);
    //you can return result as JSON
    return new Response(json_encode($response)); 
  }      
  

• Prepare your AJAXcall in your Twigtemplate, e.g.:

  function aButtonPressed(){
      $.post('{{path('AcmeHomeBundle_ajax_update_mydata')}}',               
                  {data1: 'mydata1', data2:'mydata2'}, 
              function(response){
                      if(response.code == 100 && response.success){//dummy check
                        //do something
                      }
  
      }, "json");    
  }
  
  $(document).ready(function() {     
    $('button').on('click', function(){aButtonPressed();});
  });
  

  You can change the example by using other AJAX calls.

• 为必须处理 AJAX 调用的操作定义路由。例如

  AcmeHomeBundle_ajax_update_mydata:
    pattern:  /update/data/from/ajax/call
    defaults: { _controller: AcmeHomeBundle:MyAjax:updateData }
  

• MyAjax从Homebundle 中定义控制器中的操作。例如

  public function updateDataAction(){
    $request = $this->container->get('request');        
    $data1 = $request->query->get('data1');
    $data2 = $request->query->get('data2');
    ...
    //handle data
    ...
    //prepare the response, e.g.
    $response = array("code" => 100, "success" => true);
    //you can return result as JSON
    return new Response(json_encode($response)); 
  }      
  

• AJAX在您的Twig模板中准备您的电话，例如：

  function aButtonPressed(){
      $.post('{{path('AcmeHomeBundle_ajax_update_mydata')}}',               
                  {data1: 'mydata1', data2:'mydata2'}, 
              function(response){
                      if(response.code == 100 && response.success){//dummy check
                        //do something
                      }
  
      }, "json");    
  }
  
  $(document).ready(function() {     
    $('button').on('click', function(){aButtonPressed();});
  });
  

  您可以使用其他 AJAX 调用更改示例。