2

我正在使用 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”。用户在框中键入一个数字并单击“提交”后，控件必须转到控制器，因此在成功时显示“你好”。但是，当我单击它时，什么也没有发生。请帮我。提前致谢。

4

3 回答 3

2

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

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

将其更改为

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

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

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

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

或在函数末尾使用return false;

于 2013-07-15T11:47:02.620 回答
0
  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;
  }
}
于 2017-03-05T23:45:03.987 回答
-1

**编辑：刚刚注意到，在您的 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，则说明您走在正确的道路上。然后尝试在变量中设置您的 url 并尝试在控制台中检查它：

<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

希望这可以帮助 ！

于 2013-07-15T13:09:32.937 回答