Question

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

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

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

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

有没有人有一个我想做的小例子？或者也许请给我一些解释它的教程......非常感谢！

修改

好的，谢谢各位回复。这不是直接工作，但我想我越来越接近我想要的了。这就是我现在正在做的事情：

我的观点中有这个代码：

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

我的画廊控制器中的添加操作如下所示：

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”元素时，我会收到添加操作的回复，我知道因为文本“Hello”打印在 #message_board 中。它没有刷新页面就这样做，这就是我需要的原因。我的问题是我无法使 $。ajax（）函数发送任何数据，当它到达控制器时 $ this-＆gt;数据为空，所以它永远不会进入 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']（我认为，将$this->name和$this->id转换为CakePHP。

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中是好的）

CakePHP和AJAX更新数据库，无需刷新页面

2 个答案: