Jquery 数据异步提交的小例子

发布时间:2019-07-20编辑:脚本学堂
分享一个jquery异步提交数据的例子,学习下jquery实现异步操作的方法,有需要的朋友参考下。

例子,jquery实现数据异步提交。

代码:
 

复制代码 代码示例:

if ($('#commentform').length) {
    $('#commentform').submit(function(){
        jQuery.ajax({
            url: 'comments-ajax.php', // 这里要改为 comments-ajax.php 文件的位置
            data: $('#commentform').serialize(), // 从表单中获取数据
            type: 'POST', // 设置请求类型为 ‘POST’,默认为 ‘GET’
            beforeSend: function() {
                $('#commenterror').hide();
                $('#commentload').show();
            },

            error: function(request) {
                $('#commentload').hide();
                $('#commenterror').show().html(request.responseText);

            },

            success: function(data) {
                $('textarea').each(function(){
                    this.value='';
                });

                $('#commenterror').hide().html();
                $('#comments').html(parseInt($('#comments').html()) + 1);
                if (!$('#commentlist').length) {
                    $('#pinglist').before('<ul id="commentlist"></ul>');
                }

                $('#commentlist').append(data); // 追加留言数据
                $('#commentform :input').attr('disabled', true);
                $('#commentformbox').fadeOut(1000);
                $('#commentload').hide();
                setTimeout(function() { // 提交留言 15 秒后方可再次提交新留言
                    $('#commentform :input').removeAttr('disabled');
                    $('#commentformbox').fadeIn(1000);
                }, 15000);
            }
        });
        return false;
    });
}