fed*_*nov 5 javascript ajax zend-framework2
我是zend框架2和Web应用程序编程的新手.在我的应用程序中,我想有一个按钮,它触发一个改变数据库内容的函数,并返回一个String,我可以用它来更新网站的可见内容.因为我不想在点击按钮时重新加载网站,我想使用ajax来做这件事.在阅读了几个ajax教程之后,我想到解决方案看起来很简单:
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>
使用.php文件function.php(开头,我只想让它返回一个文本值):
<?php
echo "Text triggered by the button click";
?>
当我尝试测试按钮时,没有任何反应.显然,xmlhttp.status是404并且找不到function.php文件.我想,无论是我放置function.php文件的位置(它与.phtml相同的文件夹 - 网站的视图文件)还是我在xmlhttp.open中使用的url - 函数都是错误的.你能告诉我如何正确使用zf2中的ajax吗？感谢您的时间,非常感谢每一个答案.
首先,我要感谢您的所有答案.他们真的是一个很大的帮助.使用jQuery确实比使用纯Javascript更加舒适,不仅仅是Ajax调用.詹姆斯,非常感谢你的回答.我试图使用它,但我可能做错了,因为它不起作用.我为我的问题找到了另一个解决方案,我想在这里发布以解决这个问题.
我要发布的代码是一个简单的例子:用户点击zend framework 2创建的网站中的按钮,读取输入字段,将其内容传输到服务器函数,根据收到的数据,返回一定的结果.收到结果后,网站会更新而不会重新加载.
由于我将使用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
)
),
网站的视图文件(例如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>
单击按钮时将调用的服务器函数放在网站的控制器中(在本例中为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;
}
| 归档时间： |
|
| 查看次数： |
13693 次 |
| 最近记录： |