我正在尝试从从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>
在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>
上面是一个完整的示例,应该使您对可以使用这些额外参数的想法有所了解。如果您不需要它们,请使用速记版本。