Question

我正在尝试使用modal-popup将数据添加到数据库中。但是，一旦数据被保存，那么它就不会在列表页面上显示新数据。如何在不刷新页面的情况下显示新数据。

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 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

我已经提升了与你新增的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

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

1 个答案: