Question

我使用jQuery ajax调用来处理表单。
我希望在处理表单时以及在操作完成时显示加载消息或图像以显示完整的消息我该怎么办？这是我的jQuery代码。

$s('body').on('click', '#group-update', function() {
    var formInputs = $s('input').serializeArray();
    var groupId = $s(this).data('group');
    var error = $s('#modal .info');
    var tr = $s('#dataT-attrgroup').find('tr.on_update');

    formInputs.push({
        name: 'id',
        value: groupId
    });

    $s.ajax({
        type: 'post',
        url: 'index.php?controller=attribute&method=updateGroup',
        data: formInputs,
        dataType: 'JSON',
        success: function(data) {
            if(data.response === false){
                error.addClass('info-error');
                error.html(data.message);
            }else{
                oTable.row(tr).data(data).draw();
                $s('#modal').modal('hide');
                tr.removeClass('on_update');
                $s.growl.notice({
                    title: 'Success',
                    message: 'Grupul de atribute a fost actualizat'
                });
            }

        }
    });
});

Answer 1

在ajax函数显示你的加载器和你的ajax中的成功函数之前隐藏它。

正如您在我的示例中所见，我插入了$('.loader').show();和$('.loader').hide();

$('.loader').show();
$s.ajax({
        type: 'post',
        url: 'index.php?controller=attribute&method=updateGroup',
        data: formInputs,
        dataType: 'JSON',
        success: function(data) {
            if(data.response === false){
                error.addClass('info-error');
                error.html(data.message);
            }else{
                oTable.row(tr).data(data).draw();
                $s('#modal').modal('hide');
                tr.removeClass('on_update');
                $s.growl.notice({
                    title: 'Success',
                    message: 'Grupul de atribute a fost actualizat'
                });
            }
            $('.loader').hide();
        }
    });

Answer 2

根据PHP文档：

当上传正在进行时，以及当session.upload_progress.name INI设置设置为POST的同名变量时，上传进度将在$ _SESSION超全局中可用。当PHP检测到此类POST请求时，它将填充$ _SESSION中的数组，其中索引是session.upload_progress.prefix和session.upload_progress.name INI选项的连接值。通常通过读取这些INI设置来检索密钥，即

你应该看看：https://github.com/blueimp/jQuery-File-Upload/wiki/PHP-Session-Upload-Progress

我认为这肯定会帮助你！

Answer 3

在启动$ .ajax（）之前显示您的消息; 并在成功（和错误）回调函数中关闭它。例如：

$s('body').on('click', '#group-update', function() {
var formInputs = $s('input').serializeArray();
var groupId = $s(this).data('group');
var error = $s('#modal .info');
var tr = $s('#dataT-attrgroup').find('tr.on_update');

formInputs.push({
    name: 'id',
    value: groupId
});

var dlg = $s('<div/>').text('your message').dialog();

$s.ajax({
    type: 'post',
    url: 'index.php?controller=attribute&method=updateGroup',
    data: formInputs,
    dataType: 'JSON',
    error:function() {
        dlg.dialog('close');
        },
    success: function(data) {

        dlg.dialog('close');

        if(data.response === false){
            error.addClass('info-error');
            error.html(data.message);
        }else{
            oTable.row(tr).data(data).draw();
            $s('#modal').modal('hide');
            tr.removeClass('on_update');
            $s.growl.notice({
                title: 'Success',
                message: 'Grupul de atribute a fost actualizat'
            });
        }

    }
});
});

Answer 4

如果你浏览jquery文档的ajax部分，你会发现更多的方法，比如成功，即错误，beforesend，complete等。这是代码片段。

＆＃13;

$s.ajax({
  type: 'post',
  url: 'index.php?controller=attribute&method=updateGroup',
  data: formInputs,
  dataType: 'JSON',
  beforeSend : function(){
    // load message or image
  },
  success: function(data) {
    // write code as per requirement
  },      
  complete : function(){
    // load complete message where you previously added the message or image, as a result previous one will be overwritten
  }  
});

＆＃13;

php处理时Jquery显示消息

4 个答案: