在 F5 刷新之前运行 AJAX 代码时不会更新行总和

Question

在this link here 使用 AJAX 将数据发送到 MySQL 之后，我有这个输出：

我想要的是查看 div 中显示的当前行而不是底部的行。以及如何刷新总和，而不是等待刷新页面？

这是最终的 AJAX 代码：

function addFunction()
{
    var selectW = $('#insert_new').val();
    var selectW = $('#selectW').val();
    var select_at = $('#select_at').val();
    var pay = $('#pay').val();
    var facture = $('#facture').val();
    var select_opt = $('#select_opt').val();
    if(pay!="")
    {
        $.ajax({
            data: {'selectW': selectW, 'select_at': select_at, 'pay': pay, 'facture': facture, 'select_opt': select_opt},
            type: "post",
            url: "insert_buy.php",
            success: function(response){
                  if(response=="success")
                  {
                    $('#incident_table').append('<tr><td height="30" align="center">' + selectW + '</td><td align="center">' + select_at + '</td> <td align="center" dir="ltr">' + pay + '</td> <td align="center">' + facture + '</td> <td align="center"><form action="delete.php" method="post"><input type="hidden" name="rowid" value="" /><input class="imgClass_dell" type="submit" onclick="return confirm(\'هل أنت متأكد؟\')" name="delete_sales" value="" /></form></td></tr>');
                    alert(data);
                    $('#selectW').val('');
                    $('#select_at').val('');
                    $('#pay').val('');
                    $('#facture').val('');
                    $('#select_opt').val('');
                  }
                  else
                  {
                    alert("No Data added");

                  }
            },
            error: function(){
                //alert('error; ' + eval(error));
            }
        });
    }
    else
    {
        alert("All Fields Are Required!!");
    }

}

这里是 PHP 计算总和的地方：

      </tr>
      </form>   
      <?php
        $sum = 0;
        $selectAll = "SELECT * FROM sales WHERE date_now = :date ORDER BY date_now DESC, time_now DESC";
        $stmtAll=$conn->prepare($selectAll);
        $stmtAll->bindValue(':date', date("y-m-d"));
        $execAll=$stmtAll->execute();
        $result=$stmtAll->fetchAll();
      ?>
      <?php foreach($result as $rows){
          $sum = $sum + $rows['pay'];
          //var_Dump($rows) ?>
    <tr>
      <td height="30" align="center"><?php echo $rows['type'] ?></td>
      <td align="center"><?php echo $rows['provider'] ?></td>
      <td align="center" dir="ltr"><?php echo (number_format($rows['pay'], 0, ',', ' ')). ' L.L'?></td>
      <td align="center"><?php echo $rows['facture'] ?></td>
      <td align="center"><form action='delete.php' method="post">
          <input type="hidden" name="rowid" value="<?php echo $rows['id'] ?>" />
          <input class="imgClass_dell" type="submit" onclick="return confirm('هل أنت متأكد؟')" name="delete_sales" value="" />
        </form></td>
    </tr>
    <?php } ?>
    <tr>
    <th colspan="4" align="center" bgcolor="#666666">المجموع</th>
    <td dir="ltr" bgcolor="#666666" align="center"><?php
        echo ($sum = number_format($sum, 0, ',', ' ')). ' L.L';
      ?></td>
    </tr>
  </table>
</div>
</div>

我希望能得到一些帮助。

Answer 1

你可以试试这个

您需要一个显示您的表格的 getTable.php 页面，仅此而已：没有页眉、页脚等。

PHP (getTable.php) - 这可以是任何服务器端代码（asp、html 等）

<?php
    echo '<table><tr><td>TEST</td></tr></table>';
?>

然后，在您的 JS 中，您可以使用 load() 方法轻松刷新表格：

HTML

<div id="tableHolder"></div>

js

<script type="text/javascript">
    $(document).ready(function(){
      refreshTable();
    });

    function refreshTable(){
        $('#tableHolder').load('getTable.php', function(){
           setTimeout(refreshTable, 5000);
        });
    }
</script>

祝你好运，我更喜欢使用 jqgrid