如何在不刷新页面的情况下使用AJAX获取新添加的数据

Question

I am trying to add data into database using modal-popup. But here once the data are saved then its not showing newly data on listing page. How to show new data without refreshing the page.

AJAX Call

$.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 CODE

<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

I've upated this anwer corresponding of your new added HTML/PHP code.

I saw you're using PHP to display your list. The reason that list is not updated is because the list was initialised in the page loading time. The moment when you retrive the PHP page, PHP will retrive the list in the data and contribute HTML inner the <table> . Once it is done, the HTML contributed by PHP has been deliverred to browser. PHP will be executed only when you retrive the list, that's why when you add a new line in the database it is not showed in the table because the moment the PHP contribute the list, your new data is not created.

You can always use the same way in my previous edition to get your list updated. I've adapted the code with your HTML.

In your ajax.php, return what you want to display in the list in data , then append it in your <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');
    }
  }
});

Don't forget to format your date_created and date_modified in PHP ^_^.