Question

我正在尝试在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应该如何工作，以备将来参考。

感谢任何人提供的帮助。

Answer 1

你展示的一切似乎都很好。仔细检查ajax布局是否存在，因为如果不存在，将使用默认布局。在蛋糕中使用萤火虫和日志功能来检查事情是否按计划进行。

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

Answer 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);
}

}

Answer 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);
            });
        }
    });
});

如何在CakePHP中执行jquery ajax请求？

3 个答案: