小编典典

从原型转换为jQuery

ajax

我正在尝试从从mysql数据库获取数据的php文件对div进行简单的ajax更新。一个函数填充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>

阅读 235

收藏
2020-07-26

共1个答案

小编典典

jQuery的阿贾克斯()调用,所有这一切。它具有较少参数的包装器,例如.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>

上面是一个完整的示例,应该使您对可以使用这些额外参数的想法有所了解。如果您不需要它们,请使用速记版本。

2020-07-26