我正在尝试从 php 文件中对 div 进行简单的 ajax 更新,该文件从 mysql 数据库获取数据。一个函数填充 div,另一个函数将消息添加到数据库并在单击提交按钮时调用。我想知道是否有人可以给我他们在 jquery 中的等价物。以下是原型(prototype)版本。
<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 .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>
上面是一个更完整的示例,应该可以让您了解额外参数的用途。如果您不需要它们,只需使用简写版本。
关于javascript - 从原型(prototype)转换为jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/572161/