Как получить новые данные с помощью AJAX без обновления страницы

Question

Я пытаюсь добавить данные в базу данных с помощью модального всплывающего окна. Но вот как только данные будут сохранены, то это не покажет новые данные на странице листинга. Как показать новые данные без обновления страницы.

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> 

Answer 1

Я upated этот Anwer соответствующий вашего нового добавленного кода/PHP HTML.

Я видел, что вы используете PHP для отображения списка. Причина, по которой этот список не обновляется, заключается в том, что список был инициализирован во время загрузки страницы. В тот момент, когда вы извлекаете страницу PHP, PHP будет извлекать список в данных и вносить HTML-код внутри <table>. Как только это будет сделано, HTML, предоставленный PHP, был доведен до браузера. 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^_ ^.