CakePHP 和 AJAX 在不刷新页面的情况下更新数据库

Question

我正在使用 CakePHP 1.3.7，我正在尝试执行以下操作：

在给定的页面上，用户可以单击一个链接（或图像，或按钮，无关紧要），该链接传递一个保存到数据库中的参数。但是，所有这一切，无需刷新页面。

我一直在做一些研究，我相信我也需要使用 AJAX 来完成这项工作。但是，我找不到一个很好的例子/解释如何做到这一点。

我认为这个想法是使用 AJAX 创建链接，它调用将接收变量作为参数的控制器/动作并执行操作以将其保存在数据库的相应字段/表中。

有人有我想做的小例子吗？或者也许指向我一些解释它的教程......提前非常感谢！

编辑

好的，谢谢大家的回复。他们没有直接工作，但我认为我越来越接近我想要的。这是我现在正在做的事情：

我认为有这段代码：

<div id="prev"><a>click me</a></div>

<div id="message_board"> </div>

我把这个JS文件叫做：

$(document).ready(function () {

$("#prev").click(function(event) {      
    $.ajax({data:{name:"John",id:"100"}, dataType:"html", success:function (data, textStatus) {$("#message_board").html(data);}, type:"post", url:"\/galleries\/add"});
    return false;
});
});

我在 galleries 控制器中的 add 操作如下所示：

function add() {

    $this->autoRender = false;  

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

    echo "<h2>Hello</h2>";
    print_r($this->data);
        $this->layout = 'ajax';

        if(!empty($this->data)) {

    $fields = array('phone' => 8, 'modified' => false);
        $this->User->id = 6;
            $this->User->save($fields, false, array('phone'));

        }
}
}

单击“#prev”元素时，我从 add 操作中得到响应，我知道是因为文本“Hello”打印在 #message_board 中。它在不刷新页面的情况下执行此操作，这就是我需要的原因。我的问题是我不能让 $.ajax() 函数发送任何数据，当它到达控制器时 $this->data 是空的，所以它永远不会进入将信息保存到数据库的 if 中（现在它保存只是一件简单的事情，但我希望它保存来自视图的数据）。

谁能看到我做错了什么？如何将数据发送到控制器？

Answer 1

CakePHP 无关紧要，您需要的大部分代码都在客户端。自己实现 AJAX 是个痛点，所以你真的很想用一个库；目前最流行的可能是jQuery。他们的 AJAX 页面上有很多示例：http://api.jquery.com/jQuery.ajax/

所以，假设您在文档中有这样的内容：

<form id="s">
  <input id="q"/>
  <input type="submit" href="Search!"/>
</form>
<div id="r"/>

你可以把它放在 JavaScript 中：

$('#s').submit(function(evt) {
  evt.preventDefault();
  $.ajax({
    url: 'foo.php',
    data: {
        query: $('#q').val()
      },
    success: function(data) {
        $('#r').html(data);
      }
  });
  return false;
});

那么您的foo.php 只需返回将进入div#r 的HTML 片段。

编辑：我忘了停止提交 :( 感谢@Leo 的更正。

编辑：我知道你的困惑是什么。你不会得到data。我没有使用 CakePHP，但我认为 $this->data 是你从 $_REQUEST['data'] 得到的？你不会在服务器上得到它。 data 是提交内容的哈希值；您将直接获得$_REQUEST['name'] 和$_REQUEST['id']（我假设将其转换为CakePHP 为$this->name 和$this->id）。

Answer 2

你需要添加

$('#s').submit(function(evt) {
evt.preventDefault();

为了防止页面刷新，就像在 Amadans 中的回答一样，只需在 url 变量中引用您的控制器/操作

$('#s').submit(function(evt) {
  $.ajax({
    url: '/patients/search/',
    data: {
        query: $('#q').val()
      },
    success: function(data) {
        $('#r').html(data);
      }

在患者/添加控制器操作中确保返回有效结果（在 json 中是好的）