преобразование из прототипа в JQuery

Question

Я пытаюсь сделать простое ajax-обновление div из php-файла, который получает данные из базы данных mysql. Одна функция заполняет div, другая добавляет сообщения в базу данных и вызывается нажатием кнопки отправки. Мне было интересно, если кто-то может дать мне свои эквиваленты в JQuery. Ниже приведены версии прототипа.

<script>
function getMessages(){
  new Ajax.Updater('chat','messages.php', {
    onSuccess:function(){
      window.setTimeout( getMessages, 3000 );
    }
  });
}
getMessages();
</script>

<script>
function addmessage(){
  new Ajax.Updater('chat','add.php',{
    method:'post',
    parameters: $('chatmessage').serialize(),
    onSuccess: function() {
      $('messagetext').value = '';
    }
  });
}
</script>

Answer 1

Вызов jQuery .ajax () делает все это. У него есть оболочки с меньшим количеством параметров, таких как .get (), .post () и .load (), которые вы можете использовать для более подробного синтаксиса.

Вы не упоминаете, в каком формате находятся данные, которые вы возвращаете. Вы должны указать в вызове .ajax (). Грубо говоря:

function addMessage(message) {
  $.ajax({
    url: 'add.php',
    success: function() {
      $("#chatmessage").text('');
    },
    error: function() { ... },
    timeout: 3000,
    data: {
      message: message
    } 
  });
 }

function getMessages() {
  $.ajax({
    url: 'messages.php',
    dataType: 'html',
    timeout: 3000,
    error: function() { ... },
    success: function(data) {
      $("#messages").html(data);
    }
  });
}

Примечание: параметр dataType просто должен совпадать с тем, что создает скрипт. Если messages.php создает, скажем, список сообщений в формате HTML, установите для dataType значение «html». Если это так, вы также можете упростить код до:

function getMessages() {
  $("#messages").load("message.php");
}

Примечание: функция load () является просто оболочкой для .ajax (). Используйте .ajax (), если вам нужно установить такие вещи, как время ожидания, обработка ошибок и т. Д. Например:

<div id="messages"></div>
<input type="button" id="getmessages" value="Get Messages">
...
<script type="text/javascript">
$(function() {
  $("#getmessages").click(function() {
    $(this).attr("disabled", "true");
    $.ajax({
      url: 'message.php',
      dataType: "html",
      timeout: 5000,
      error: function() {
        alert("Error talking to server.");
        $(this).attr("disabled", "false");
      },
      success: function(data) {
        $("#messages").html(data);
        $(this).attr("disabled", "false");
      }
    });
  });
});
</script>

Вышеприведенный пример является более полным примером и должен дать вам представление о том, для чего вы можете использовать дополнительные параметры. Если они вам не нужны, просто используйте сокращенные версии.

Answer 2

$.ajax({
    type: "GET",
    url: "messages.php",
    data: "name=John&location=Boston",
    success: function(){
        window.setTimeout(getMessages,3000);
    }
});

для второго добавления

$.ajax({
    type: "POST",
    url: "add.php",
    data: $('#chatmessage').param(),
    success: function() {
        $('messagetext').value = '';
    }
});

для получения более подробной информации смотрите http://docs.jquery.com/Ajax