php处理时Jquery显示消息

Jquery display message while php processing

本文关键字:显示 消息 Jquery 处理 php      更新时间:2023-09-26

我正在使用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'
                });
            }
        }
    });
});

在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();
        }
    });

根据PHP文档:

当上传正在进行时,以及当POST与SESSION.upload_progress.name INI设置相同名称的变量时,上传进度将在$_SESSION超级全局中可用。当PHP检测到此类POST请求时,它将在$_SESSION中填充一个数组,其中,索引是session.upload_progresss.prefix和session.upload _progress.name INI选项的串联值。密钥通常通过读取这些INI设置来检索,即

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

我想这肯定会帮你的!

在启动$.ajax()之前显示您的消息;并在success(和error)回调函数中关闭它。示例:

$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'
            });
        }
    }
});
});

如果你浏览jquery文档的ajax部分,你会注意到更多的方法,如成功,即error,beforesend,complete等。这是代码片段。

$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
  }  
});