在zend框架中使用ajax 2

i am really new to the zend framework 2 and to the programming of web applications. In my application, i want to have a button which triggers a function that changes the content of a database and returns a String which i can use to update the visible content of the website. As i don´t want the website to reload when the button is clicked, i would like to do this using ajax. After reading a couple of ajax tutorials, i imagined that the solution would look somilar to this:

我真的很擅长zend框架2和Web应用程序的编程。在我的应用程序中，我想有一个按钮，它触发一个改变数据库内容的函数，并返回一个String，我可以用它来更新网站的可见内容。因为我不想在点击按钮时重新加载网站，我想使用ajax来做这件事。在阅读了几个ajax教程后，我想到解决方案看起来很简单：

The HTML part:

HTML部分：

 <head>

 <script type="text/javascript">

 function myFunction() {

var xmlhttp = new XMLHttpRequest();
    // I am working with Chrome

    xmlhttp.onreadystatechange=function(){

        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){

                var text = xmlhttp.responseText;
        document.getElementById("text_paragraph").innerHTML =                 
                            text;
            }
                    };

        xmlhttp.open("GET", "function.php", true);
        xmlhttp.send();

}

 </script>

 </head>

 <body>
 ......
 <button id="function_button" onClick="myFunction()">Click</button>
 <p id = "text_paragraph">Initial text"</p>
 ......  
 </body>

With the .php file function.php (for the beginning, i just want it to return a text value) :

使用.php文件function.php（开头，我只想让它返回一个文本值）：

<?php

     echo "Text triggered by the button click";
?>

When i try to test the button, nothing happens. Apparently, the xmlhttp.status is 404 and the function.php file can´t be found. I suppose that either the location where i put the function.php file (it is in the same folder as the .phtml - view file of the website) or the url i´m using in the xmlhttp.open - function is wrong. Could you please tell me how to use ajax in zf2 correctly? Thank you for your time, every answer is very much appreciated.

当我尝试测试按钮时，没有任何反应。显然，xmlhttp.status是404并且找不到function.php文件。我想，无论是我放置function.php文件的位置（它与.phtml相同的文件夹 - 网站的视图文件）还是我在xmlhttp.open中使用的url - 函数都是错误的。你能告诉我如何正确使用zf2中的ajax吗？感谢您的时间，非常感谢每一个答案。

2 个解决方案

#1

First of all i want to thank for all your answers. They really were a great help. Using jQuery is indeed much more comfortable, and not only for Ajax calls, than using pure Javascript. James, thank you very much for your answer. I tried to use it, but i probably did something wrong because it did not work. I found another solution for my problem and i want to post it here in order to round this question up.

首先，我要感谢您的所有答案。他们真的是一个很大的帮助。使用jQuery确实比使用纯Javascript更加舒适，不仅仅是Ajax调用。詹姆斯，非常感谢你的回答。我试图使用它，但我可能做错了，因为它不起作用。我为我的问题找到了另一个解决方案，我想在这里发布它以解决这个问题。

The code that i am going to post is a little example that just does a simple thing: on a user click on a button in a website created by zend framework 2, an input field is read, the content of it is transfered to a server function, which, according to the data it receives, returns a certain result. After receiving the result, the website is updated without being reloaded.

我要发布的代码是一个简单的例子：用户点击zend framework 2创建的网站中的按钮，读取输入字段，将其内容转移到服务器函数，根据收到的数据，返回一定的结果。收到结果后，网站会更新而不会重新加载。

As i am going to use Json objects for the communication, it is necessary to activate the Json strategies in zf2 by adding the following codeline to the module.config.php:

由于我将使用Json对象进行通信，因此需要通过将以下代码行添加到module.config.php来激活zf2中的Json策略：

// module/Application/config/module.config.php

'view_manager' => array (
                'display_not_found_reason' => true,
                'display_exceptions' => true,
                'doctype' => 'HTML5',
                'not_found_template' => 'error/404',
                'exception_template' => 'error/index',
                'template_map' => array (
                        'layout/layout' => __DIR__ .   
'/../view/layout/layout.phtml',
                        'application/index/index' => __DIR__ . 
'/../view/application/index/index.phtml',
                        'error/404' => __DIR__ . 
'/../view/error/404.phtml',
                        'error/index' => __DIR__ . 
'/../view/error/index.phtml' 
                ),
                'template_path_stack' => array (
                        __DIR__ . '/../view' 
                ),
                'strategies' => array (            // Add
                                           // this
                        'ViewJsonStrategy' // line
                )

        ),

The view file of the website (called, for example example.phtml) will look similar to this:

网站的视图文件（例如example.phtml）将类似于：

<html>
<head>

<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>

//Function,  activated by clicking the button

$("#trigger").click(function(){

    var text = $("#input_to_read").val();
    var myData = {textData:text};

    //The post using ajax
    $.ajax({
            type:"POST",
            // URL : / name of the controller for the site / name of the action to be                         
            //                                                 executed
            url:"/example/answer",
            data:myData,
            success: function(data){
                                   //The callback function, that is going to be executed 
                                   //after the server response. data is the data returned
                                   //from the server.

                                   // Show the returned text
                                   $("#answer").text(data.text);


                                    },
            failure(function(){alert("Failure!!");})


           });


});


</script>
</head>

<body>

<input id="input_to_read" type="text">
<button id="trigger">Klick</button>
<!-- The answer will be shown here. -->
<p id="answer"></p>
</body>
</html>

The server function, that is going to be called when the button is clicked, is placed in the controller for the website (in this case, the ExampleController) and could look like this:

单击按钮时将调用的服务器函数放在网站的控制器中（在本例中为ExampleController），可能如下所示：

//Make sure to add this line to use Json objects
use Zend\View\Model\JsonModel;

....


public function answerAction(){

#read the data sent from the site
$text = $_POST['textData'];

#do something with the data

$text = $text . "successfully processed";

#return a Json object containing the data

$result = new JsonModel ( array (

                'text' => $text 
        ) );
return $result;
}

#2

Typically the way I would handle this, is to build an RPC controller to just return JSON, and then use some good javascript frameworks like jQuery, and Knockout JS, to dynamically update the relevant UI areas. I believe the base Zend controller class provides a $this->_helper->json method that will return JSON instead of returning what you have defined in a given view. In the case of Public_RpcController below I didn't even define a view at all. It returns JSON which I can use in conjunction with JS frameworks for client side markup manipulation. Using the JS frameworks has a bit of learning curve but well worth learning.

通常我处理这个问题的方法是构建一个RPC控制器来返回JSON，然后使用一些好的javascript框架（如jQuery和Knockout JS）来动态更新相关的UI区域。我相信基本的Zend控制器类提供了一个$ this - > _ helper-> json方法，该方法将返回JSON而不是返回您在给定视图中定义的内容。在下面的Public_RpcController的情况下，我根本没有定义视图。它返回JSON，我可以将其与JS框架一起用于客户端标记操作。使用JS框架有一点学习曲线，但值得学习。

class Public_RpcController extends MySubClassed_Controller_Action
{
    public function getUserDataAction()
    {
        $output = array();
        $request = $this->getRequest();

        ...

        $output = array(
                'Value1'    => "foobar",
                'Value2'    => "foobar",
        );
        return $this->_helper->json($output);       
    }   
}

// Use Jquery to fetch JSON data to update. 
$.getJSON( "/rpc/get-user-data", function( data ) { 
    // Do something with the JSON data like bind to Knockout template.
});

#1