javascript - 如何使用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列表中显示的内容，然后将其附加到您的 <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 的格式 ^_^。