如何在不刷新頁面的情況下使用AJAX獲取新增數據

我試圖使用模式彈出將數據添加到數據庫中。但是這裏一旦保存了數據，它就不會在列表頁面上顯示新數據。如何在不刷新頁面的情況下顯示新數據。如何在不刷新頁面的情況下使用AJAX獲取新增數據

AJAX調用

$.ajax({ 
    type: "POST", 
    url: "ajax.php", 
    data: {request_type:'ADDEDIT',A:$("#FILELD_A").val(),B:$("#FIELD_B").val(),element_id:tempvarid}, 
    async: false, 
    success: function(html) 
    { 
     data = jQuery.parseJSON(html); 
     if(data.status==1) 
     { 

      showMsg('success',data.msg,true,''); 
      setTimeout(function(){$('#modal-adducode').modal('hide')},500); 

     } 
     else 
     { 
      showMsg('danger',data.msg,true,'#document_constant-msg'); 
     } 
    } 
});

HTML代碼

<table id="data-table" class="table table-bordered table-striped"> 
       <thead> 
        <tr> 
        <th>Field A</th> 
        <th>Field B</th> 
        <th>Created Date</th> 
        <th>Modified Date</th>       
        </tr> 
       </thead> 
       <tbody> 
       <? foreach($allData as $val){ echo $val['FamilyId'];?> 
        <tr> 
        <td><?=$val['field_a']?></td> 
        <td><?=$val['field_b']?></td>      
        <td><?=date("d M y H:i:s",strtotime($val['DateCreated']))?></td> 
        <td><?=date("d M y H:i:s",strtotime($val['DateModified']))?></td>      
        </tr> 
       <? } 

       ?> 

      </tbody> 
</table>

來源

2015-07-21 kreya

也顯示你的html。（**提示：**在ajax的**成功**列表中追加數據） – SHAZ

提供您的列表頁面綁定（HTML） –

我已經更新過的相應的新添加的HTML/PHP代碼這個前面回答。

我看到你使用PHP來顯示你的列表。列表未被更新的原因是因爲列表在頁面加載時被初始化。當您檢索PHP頁面時，PHP將檢索數據中的列表並貢獻HTML內部的<table>。一旦完成，PHP提供的HTML已經交付給瀏覽器。 PHP只會在您檢索列表時執行，這就是爲什麼當您在數據庫中添加新行時，它不會顯示在表中，因爲PHP貢獻列表的時候，您的新數據不會被創建。

您可以隨時在我以前的版本中使用相同的方式來更新您的列表。我已經用HTML修改了代碼。

在你ajax.php，返回你想要在data列表中顯示的是什麼，然後在你的<table>追加它：

$.ajax({ 
    type: "POST", 
    url: "ajax.php", 
    data: { 
    request_type: 'ADDEDIT', 
    A: $("#FILELD_A").val(), 
    B: $("#FIELD_B").val(), 
    element_id: tempvarid 
    }, 
    async: false, 
    success: function(html) { 
    data = jQuery.parseJSON(html); 
    if (data.status == 1) { 

     showMsg('success', data.msg, true, ''); 

     // contribute a new line and add it in your list 
     $('#data-table > tbody').append('<tr>'+ 
       '<td>'+data.field_a+'</td>'+ 
       '<td>'+data.field_b+'</td>'+      
       '<td>'+data.date_created+'</td>'+ 
       '<td>'+data.date_modified+'</td>'+      
       '</tr>'); 

     setTimeout(function() { 
     $('#modal-adducode').modal('hide') 
     }, 500); 


    } else { 
     showMsg('danger', data.msg, true, '#document_constant-msg'); 
    } 
    } 
});

不要忘了格式化DATE_CREATED和DATE_MODIFIED在PHP^_ ^中。

來源

2015-07-21 08:17:29 Qianlong

如何在不刷新頁面的情況下使用AJAX獲取新增數據

回答

相關問題