如何使用Jquery执行更新状态(ajax)?

时间:2009-05-19 11:31:18

标签: jquery ajax status

如何使用Jquery进行更新状态,比如你现在在做什么(facebook + ajax)?

我找到了一个与此非常相似的教程,但他们使用的是mootools,是否有使用Jquery的教程?

我是javascript和jquery的新手,我需要你们的帮助和建议

编辑:

可以从这里找到mootool示例:

http://nettuts.com/tutorials/php/twitter-emulation-using-mootools-12-and-php/

6 个答案:

答案 0 :(得分:2)

基本上,您要做的是使用表单内容向服务器发出jQuery POST请求。 (仔细查看示例以了解它是如何工作的......)将发布的数据存储在数据库中,向客户端发送响应并使用回调函数通过重新加载应该是的特定字段来更新页面更新。

我没有看到任何教程来创建这个特定的功能,但是如果你使用jQuery和服务器端选择语言玩一下,你应该能够很快解决它。

答案 1 :(得分:1)

答案 2 :(得分:1)

你可能想这样做..

$("div").html("<span class='red'>Hello <b>Again</b></span>");

$("p").text("<b>Some</b> new text.");

结帐 JQuery Docs

答案 3 :(得分:1)

@Tomas和@Natrium已经基本上告诉了你需要知道的事情。

由于您说您不熟悉javascript和jQuery,我建议您查看http://docs.jquery.com/Main_Page

有关Ajax特定文档,请查看http://docs.jquery.com/Ajax

要学习jQuery的基础知识(即使你不了解很多javascript),我推荐“学习jQuery”一书http://www.packtpub.com/learning-jquery-1.3/book/mid/220409c024ep

答案 4 :(得分:0)

如果你完全按照他们的方式关注mootools示例,javascript代码只需要在jQuery中更改为可以工作(基本上以相同的方式):

$(function() {
    //make the ajax call to the database to save the update
    $.ajax({
        url: '<?php echo $_SERVER['PHP_SELF']; ?>',
        method: 'POST',
        beforeSend: function() {
            $('submit').attr('disabled','disabled');
        },
        complete: function(xhr,status) {
            $('submit').disabled = 0;
            $('#message').removeClass('success').removeClass('failure');
            $('#message').fadeIn(3000);
        },
        success: function(data,status) {
            //update message
            $('#message').text('Status updated!').addClass('success').fadeIn('medium');

            //store value, clear out box
            var status = $('#status').val();
            $('#status').val('');

            //add new status to the statuses container
            var element = $('<div class="status-box">');
            element.html(status + '<br /><span class="time">A moment ago</span>');
            $('#statuses').prepend(element);

            //place the cursor in the text area
            $('#status').focus();

        },
        error: function(xhr, status, error) {
            //update message
            $('#message').text('Status could not be updated.  Try again.').addClass('failure').fadeIn('medium');
        }
    });
});

答案 5 :(得分:0)

不要自我推销太多,但我写了一篇关于这件事的教程。很容易做到:http://blog.twostepmedia.co.uk/dynamic-jquery-twitter-status/