javascript - 如何只加载一个div而不加载所有页面文件

Question

我有这个AJAX代码，它有助于将一些数据插入MySQL，并保持在同一页面中:

$(function(){
  $("#form1").on("submit", function (e){
      console.log("Form is submitted");
    $.ajax({
      url: 'insert.php',
      type: 'post',
      data: $('#form1').serialize() + "&insert=yes",
      dataType: 'json',
      success: function(data) {
        alert($('#form1').serialize());
      } //<--------------------------------------- You missed this
    });

    e.preventDefault();
    //location.reload();
  });
  $("#insert").on("click", function (e){
      console.log("Insert Key is clicked");
    $.ajax({
      url: 'insert.php',
      type: 'post',
      data: $('#form1').serialize() + "&insert=yes",
      dataType: 'json',
      success: function(data) {
        alert($('#form1').serialize());
      } //<--------------------------------------- You missed this
    });

    e.preventDefault();
    location.reload();
  });
});

我需要删除这一行:

location.reload();

并将其替换为帮助我刷新 div 的代码，其中我有一个 HTML Table 显示当前插入的数据。这是这个 div 的代码:

<div id="section2">
  <table class="imagetable" border="1" cellspacing="2" cellpadding="2">
    <tr>
      <th colspan="5" bgcolor="#666666">المبيعات</th>
    </tr>

      <th width="15%">النوع</th>
      <th width="35%">Alfa/Touch</th>
      <th width="25%">المبلغ</th>
      <th width="25%">رقم الفاتورة (OMT, Alfa ...)</th>
      <th width="25%">العملة</th>
    <form name="insertForm" action="insert.php" method="post" id="form1">

    <tr>
        <td align="center">
          <select id="selectW" name="type">
            <option value="لم يتم التحديد">اختر النوع</option>
            <option value="دولارات">دولارات</option>
            <option value="أيام + دولارات">أيام + دولارات</option>
            <option value="بطاقات">بطاقات</option>
            <option value="هواتف">هواتف</option>
            <option value="اكسسوارات">اكسسوارات</option>
            <option value="تسديد فواتير">تسديد فواتير</option>
          </select>
          <!--<select>
          <?php foreach($result5 as $rows){ ?>
            <option value="<?php echo $rows['item_name'] ?>"><?php echo $rows['item_name'] ?></option>
            <?php } ?>
          </select>-->
          </td>
        <td align="center"><select id="select_at" name="alfa_touch">
            <option value="غير محدد">Not Required</option>
            <option value="Alfa">Alfa</option>
            <option value="Touch">Touch</option></select></td>
        <td align="center"><input type="text" id="pay" name="pay"/></td>
        <td align="center"><input type="text" id="facture" name="facture" placeholder="في حال دفع الفواتير عبر omt"/></td>
        <td align="center"><select id="select" name="currency">
            <option value="9">ليرة</option>
            <option value="10">دولار</option>
            </select></td>

        <td align="center"><input type="submit" id="insert" name="insert" value="اضافة" />

      </td>

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

我尝试了一些 stackoverflow 回答的有关名为“append”的问题，但没有任何效果(控制台中没有显示错误)。

他们的代码是否可以让我在每次添加数据时仅加载此 div，而无需重新加载包含所有外部文件(如 .css 和其他 .js 文件)的所有页面？

Answer 1

分析您的问题后，我可以说这可能适合您:

$("#insert").on("click", function (e){
  $this = $(this)
  $.ajax({
    url: 'insert.php',
    type: 'post',
    data: $('#form1').serialize() + "&insert=yes",
    dataType: 'json',
    success: function(data) {
      $this.closest("tr").after('<td height="30" align="center">' + 
        $('[name=""]').val() + '</td>' +
        '<td align="center">' + $('[name="selectW"]').val() + '</td>' +
        '<td align="center" dir="ltr">' + $('[name="alfa_touch"]').val() + '</td>' +
        '<td align="center">' + $('[name="pay"]').val() + '</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>');
    }
  });
  e.preventDefault();
  // location.reload(); // remove this
});