如何在不刷新页面的情况下使用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

我已经更新了与您新添加的HTML / PHP代码相对应的内容。

我看到您正在使用PHP来显示您的列表。 列表未更新的原因是因为该列表是在页面加载时间中初始化的。 检索PHP页面的那一刻，PHP将检索数据中的列表，并在<table>内部提供HTML。 完成后，PHP提供的HTML已交付给浏览器。 仅在检索列表时才会执行PHP，这就是为什么在数据库中添加新行时，该行未显示在表中的原因，因为在PHP贡献列表时，不会创建新数据。

在我的上一版中，您始终可以使用相同的方式来更新列表。 我已经用您的HTML修改了代码。

在您的ajax.php中，返回要在data列表中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');
    }
  }
});

不要忘了用PHP ^ _ ^格式化date_created和date_modified。