javascript 在 Zend 框架 2 中使用 ajax
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19054288/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using ajax in zend framework 2
提问by fedorSmirnov
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 应用程序编程真的很陌生。在我的应用程序中，我想要一个按钮来触发一个函数来更改数据库的内容并返回一个字符串，我可以用它来更新网站的可见内容。由于我不希望在单击按钮时重新加载网站，因此我想使用 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吗？感谢您的时间，非常感谢您的每一个答案。
回答by fedorSmirnov
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.
首先，我要感谢您的所有回答。他们真的是一个很大的帮助。与使用纯 Javascript 相比，使用 jQuery 确实要舒服得多，而且不仅适用于 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 框架 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;
}
回答by James
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->jsonmethod that will return JSON instead of returning what you have defined in a given view. In the case of Public_RpcControllerbelow 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.
});
