Zend 框架中的 Ajax/Jquery

Question

我正在使用 Zend 框架 (php)，我正在尝试使用 ajax/jquery 提交一个。

这是.phtml：

<form id="find">
    <input type="text" name="name">
    <input type="submit" id="submit" value="Submit">
</form>

这里是 ajax/jquery 部分：

$(document).ready(function() {
    $("#submit").click(function(){
        $.ajax({
            type:'POST',
            url: "<?php echo SITE_URL;?>Training/test", 
            data:$('#find').val(), 
            success: function(response) {
                alert (response);
            }
        });
    });
});

这里，“Training”是控制器，“test”是控制器内部的动作。该操作只有 1 行代码，即 echo “hello”。用户在框中键入一个数字并单击“提交”后，控件必须转到控制器，从而在成功时显示“你好”。但是，当我单击它时，什么也没有发生。请帮我。提前致谢。

Answer 1

你没有在 Ajax 调用中命名参数

data:$('#find').val(), 

改成

data:{'param': $('#find').val()}, 

关于 Zend，它是否是 zend 并不重要。您只需提供正确的 URL 即可处理请求。您可以通过$this->getParam('param') 方法在Zend 中访问param 值。

您也不会阻止默认提交操作。将您的功能更改为：

$("#submit").click(function(ev){ 
          ev.preventDefault();

或者在函数末尾使用return false;

Answer 2

1. 我没有测试你的 jQuery。但请注意，您需要使用指令event.preventDefault 来确保您没有正常的表单提交操作。

2. 主要问题在于您的 zend 控制器，因为您需要一个 特别回应。我想你有一个控制器来执行请求逻辑。我将其命名为 AjaxController，并将动作命名为 ajaxrecuestAction 以说明如何发送正确的响应。

   <?php
   // Filename: yourProject/module/ModuleName/src/Controller/AjaxController.php
   namespace ModuleName\Controller;
   
   use Zend\Mvc\Controller\AbstractActionController;
   use Zend\View\Model\ViewModel;
   
   class AjaxController extends AbstractActionController {
   public function ajaxrecuestAction(){
     // This function is called by zend to procces your ayax request
     // you must test if it's an xmlHttpRequest
     $request = $this->getRequest();
     $is_xmlHttpRequest = ($request->isXmlHttpRequest()) ? 1 : 0;
     if(!$is_xmlHttpRequest){
       // If not you must return a normal page, a message page
       // perhaps a forgiven message page, etc. It depends on your site
       // logics
     }else{
       // The solution's KEY
       // You must disable the zend's normal output
       $viewmodel = new ViewModel();
       $viewmodel->setTerminal($is_xmlhttprequest);
       // Proccess the input and prepare your output
       $output = CallTheLogicsToPrepareIt($request->getContent());
       // send your response
       $response = $this->getResponse();
       $response->setContent($output);
       return $response;
     }
   }
   

Answer 3

**编辑：刚刚注意到，在您的 HTML 中，您没有为“查找”字段提供 ID 属性。因此 $('#find').val() 会给你一个错误，比如“找不到未定义的方法 val()。将 id=find 标签添加到你的，它应该可以工作。

** 其他编辑：很抱歉造成混乱。您的表单具有 id=find 但您想要发送到服务器（我相信）的是字段的值。所以给你的输入一个 ID=name 然后使用：

var data = {find: $('#name').val()};

您应该首先使用控制台查看是否触发了事件。比如：

<script>
$(document).ready(function() {
    $("#submit").click(function(e){
        e.preventDefault ? e.preventDefault() : e.returnValue = false;  //This will prevent the regular submit
        console.log('Hello');
    });
});
</script>

（您确实使用 Fire bug 或 Chrome 开发工具，对吧）？如果没有，请看这篇文章的结尾。 如果您可以在控制台中看到 Hello，则说明您走在正确的道路上。然后尝试将您的网址设置在一个变量中并尝试在您的控制台中检查它：

<script>
var url = "<?php echo SITE_URL;?>Training/test";
$(document).ready(function() {
    $("#submit").click(function(e){
        e.preventDefault ? e.preventDefault() : e.returnValue = false;  //This will prevent the regular submit
        console.log(url);
    });
});
</script>

然后你应该在控制台中看到 url，这意味着你仍然做得很好。

如果可行，请尝试设置数据并以相同方式检查输出：

<script>
var url = "<?php echo SITE_URL;?>Training/test";
var data = {
    find: $('#find').val()
};
$(document).ready(function() {
    $("#submit").click(function(e){
        e.preventDefault ? e.preventDefault() : e.returnValue = false;  //This will prevent the regular submit
        console.log(data);
    });
});
</script>

希望一切仍然有效（您看到了数据），然后尝试实际的完整代码，看看您是否有错误或其他问题。此外，请务必在您的 ajax 调用中包含错误函数，以便在服务器出现问题时得到响应。

<script>
var url = "<?php echo SITE_URL;?>Training/test";
$(document).ready(function() {
    $("#submit").click(function(e){
        e.preventDefault ? e.preventDefault() : e.returnValue = false;  //This will prevent the regular submit
        var url = "<?php echo SITE_URL;?>Training/test";
        var data = {
            find: $('#find').val()
        };
        $.ajax({
            type:'POST',
            url: url, 
            data: data, 
            success: function(response) {
                alert (response);
            },
            error: function(resp) {
                alert(resp.responseText);
            }
        });
    });
});
</script>

一些可以帮助你的工具：

如果您使用的是 FireFox，请使用 FireBug 进行调试：https://addons.mozilla.org/fr/firefox/addon/firebug/

如果您使用的是 Chrome（我个人最喜欢的），请进一步了解 Chrome 开发者工具：https://developers.google.com/chrome-developer-tools/?hl=fr

如果您使用的是 IE，请切换到其他用于开发目的，然后在 IE 中尝试以确保您的代码兼容（很可能不会，但更容易找出为什么不兼容之后工作）。

至于 e.preventDefault...... 行，请查看此 SO 帖子以获取更多详细信息：https://stackoverflow.com/a/15913969/1483513

希望这会有所帮助！