如何在 CakePHP 中执行 jQuery ajax 请求？答案

【问题标题】：How do I perform a jQuery ajax request in CakePHP?如何在 CakePHP 中执行 jQuery ajax 请求？
【发布时间】：2011-07-23 21:14:36
【问题描述】：

我正在尝试在 CakePHP 中使用 Ajax，但并没有真正实现！

我有一个带有一系列按钮的页面 - 单击其中一个按钮应该会在当前页面上显示特定内容。页面不要重新加载很重要，因为它将显示电影，我不希望电影重置。

有几个不同的按钮，每个按钮都有不同的内容；此内容可能非常大，所以我不想在需要之前加载它。

通常我会通过 jQuery 执行此操作，但我无法在 CakePHP 中使用它。

到目前为止我有：

在视图中，按钮控件是这样的：

$this->Html->link($this->Html->image('FilmViewer/notes_link.png', array('alt' =>  __('LinkNotes', true), 'onclick' => 'showNotebook("filmNotebook");')), array(), array('escape' => false));

在此下方有一个名为“filmNotebook”的 div，我希望在其中显示新内容。

在我的 functions.js 文件中（在 webroot/scripts 中）我有这个功能：

function showNotebook(divId) {
 // Find div to load content to
 var bookDiv = document.getElementById(divId);
 if(!bookDiv) return false;
 $.ajax({ 
   url: "ajax/getgrammar",
   type: "POST",
   success: function(data) {
    bookDiv.innerHTML = data;
   }
  });
 return true;
}

为了生成在 div 中显示的纯内容，我在 routes.php 中设置了以下内容：

 Router::connect('/ajax/getgrammar', array('controller' => 'films', 'action' => 'getgrammar'));

在films_controller.php中，getgrammar函数为：

  function getgrammar() {
   $this->layout = 'ajax';
   $this->render('ajax');
  }

布局文件只有：

当前视图 ajax.ctp 只是：

<div id="grammarBook">
 Here's the result
</div>

问题是，当我单击按钮时，我得到了默认布局（所以它就像一个页面出现在我的页面中），其中包含电影索引页面。好像没有在films_controller.php中找到正确的动作

我已完成 CakePHP 手册 (http://book.cakephp.org/view/1594/Using-a-specific-Javascript-engine) 中建议的所有操作。

我做错了什么？我愿意接受有关更好方法的建议，但我也想知道 Ajax 应该如何工作，以供将来参考。

【问题讨论】：

标签： ajax cakephp jquery cakephp-1.3

【解决方案1】：

你展示的一切看起来都很好。仔细检查 ajax 布局是否存在，因为如果不存在，将使用默认布局。使用 cake 中的 firebug 和 log 功能检查事情是否按您的计划进行。

还有一些建议：为什么需要 POST 到 'ajax/getgrammar' 然后将其重定向到 'films/getgrammar'？然后渲染 ajax.ctp 视图？这对我来说似乎是多余的。您可以对“电影/getgrammar”进行 ajax 调用，并且不需要路由器规则。可以把ajax.ctp改成getgrammar.ctp，就不需要$this->render('ajax');

【讨论】：

谢谢，我会检查的。路由真的只是暂时的——语法的东西最终可能会有自己的控制器——我只是在等待来自客户端的信息！
谢谢 - 我解决了！按照您的建议重命名了各个位，这使得调试更容易。我最终发现它发布到了错误的 url - 而不是 url：“ajax/getgrammar”，我需要 url：“/ajax/getgrammar”。再次感谢您的帮助！
另外不要忘记检查操作权限。

【解决方案2】：

这是 ajax 调用

$(function() {
    $( "#element", this ).keyup(function( event ) {
        if( $(this).val().length >= 4 ) {
            $.ajax({                   
                url: '/clients/index/' + escape( $(this).val() ),
                cache: false,
                type: 'GET',
                dataType: 'HTML',
                success: function (clients) {
                    $('#clients').html(clients);
                }
            });
        }
    });
});

这是ajax调用的动作

public function index($searchterm=NULL) {

if ( $this->RequestHandler->isAjax() ) {

        $clients=$this->Client->find('list', array(
            'conditions'=>array('LOWER(Client.lname) LIKE \''.$searchterm.'%\''),
            'limit'=>500
        ));

        $this->set('clients', $clients);
}

}

【讨论】：

【解决方案3】：

这是我在 cakephp 3.x 中用于提交表单的函数，它使用甜蜜警报，但可以更改为普通警报。这是非常多变的，只需在控制器中放置一个动作来捕获表单提交。此外，位置重新加载将重新加载数据以向用户提供即时反馈。可以取出来的。

$('#myForm').submit(function(e) {
    // Catch form submit
    e.preventDefault();

    $form = $(this);
    // console.log($form);
    // Get form data
    $form_data = $form.serialize();
    $form_action = $form.attr('action') + '.json';
    // Do ajax post to cake add function instead
    $.ajax({
        type   : "PUT",
        url    : $form_action,
        data   : $form_data,
        success: function(data) {
            swal({
                title: "Updated!", 
                text: "Your entity was updated successfully", 
                type: "success"
            },
            function(){
                    location.reload(true);
            });
        }
    });
});

【讨论】：