2014-10-16 40 views
0

我正在使用jQuery ajax調用後處理表單。
我想要在處理表單和完成操作以顯示完整的消息時顯示加載消息或圖像。
我該怎麼做?
這是我的jQuery代碼。jquery顯示消息,而php處理

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

     } 
    }); 
}); 

回答

0

按照PHP文檔:

上傳進度將在$ _SESSION全局可當上載正在進行中,並張貼了相同的名稱,會話變量時。 upload_progress.name INI設置設置爲。當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

我認爲這肯定會幫助你!

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

我的驗證之前處理 – speedy 2014-10-16 13:58:55

+0

而PHP調用時 – speedy 2014-10-16 14:01:49

+0

我相信通過Ajax也有一些這方面的先進技術,如文件上傳應顯示加載消息,但如果你想爲了保持簡單,那麼我建議兩個選項: 1.在js中進行檢查, 2.創建2個Ajax請求 – 2014-10-16 14:08:38

0

顯示你的消息; 並關閉成功(和錯誤)回調函數。 例如:

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

    } 
}); 
}); 
0

如果你通過jQuery文檔的ajax的部分,你會發現類似的成功即誤差一些方法,beforesend,完整等。這裏是代碼片段。

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