CakePHP и AJAX для обновления базы данных без обновления страницы

Question

Я работаю с CakePHP 1.3.7 и пытаюсь сделать следующее:

На данной странице пользователь может щелкнуть ссылку (или изображение, или кнопку, неважно), которая передает параметр, который сохраняется в базе данных. НО, все это, без обновления страницы .

Я проводил некоторые исследования и считаю, что для этого мне нужно использовать AJAX. Однако я не могу найти хороший пример / объяснение того, как это сделать.

Я думаю, что идея состоит в том, чтобы создать ссылку, используя AJAX, который вызывает контроллер / действие, которое получит переменную в качестве параметра, и выполняет операцию по ее сохранению в соответствующем поле / таблице БД.

У кого-нибудь есть небольшой пример того, что я хочу сделать? Или, может быть, укажите мне учебник, который объясняет это ... Большое спасибо заранее!

EDIT

Ну, спасибо вам, ребята, за ваши ответы. Они не работают напрямую, но я думаю, что все ближе к тому, что я хочу. Вот что я делаю сейчас:

У меня есть этот код на мой взгляд:

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

И мое add action в моих галереях контроллер выглядит так:

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 пуста, поэтому никогда не заходит внутрь , если , который сохраняет информацию в базу данных (сейчас это просто, но я хочу, чтобы она сохраняла данные, полученные из представления).

Кто-нибудь может увидеть, что я делаю не так? Как я могу отправить данные на контроллер?

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 нужно только вернуть фрагмент HTML, который попадет в div#r.

РЕДАКТИРОВАТЬ: я забыл остановить отправку :( Спасибо @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 это хорошо)