如何仅加载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 ，在该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

你最终需要这个..

$(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();
$('#YourDivId').append('<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><?php foreach($result5 as $rows){ ?><option value="<?php echo $rows['item_name'] ?>"><?php echo $rows['item_name'] ?></option><?php } ?></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>');
});
});

但是...您只需要一次输入一个表元素。

所以我将从

$('#YourDivId').append('<div id="section2">');

测试一下。

然后

$('#YourDivId').append('<div id="section2"><table class="imagetable" border="1" cellspacing="2" cellpadding="2">');

测试一下。

等等等等 ..

Answer 2

在分析了您的问题之后，我可以说这可能为您解决：

$("#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
});