來自ajax的jQuery帖子加載了div

Question

似乎無法弄清楚這一點。 我有一個頁面，其中一個div的內容通過ajax加載。 該div中包含表單，提交后應刷新以顯示新內容。 但無需重新加載整個頁面。 那怎么可能？ 我現在迷失了。

而且我也不認為為每一行循環新表單是最好的樣式，但是現在什么也沒想到。 如果有人可以幫助我，那就太好了。

display.php

<script>
$(document).ready(function() {    
$("#list").load("list.php");
});
</script>
 .................
 other stuff
 .................

  <div id="list"></div>

list.php

<script>
$(document).ready(function() {
$( ".add" ).click(function(event){
 event.preventDefault();
 $.ajax({type:"POST", url:"ajax_post.php",
 data:$("#"+id).serialize(), cache:false, timeout:10000 });

  location.reload();

   }); });
  </script>

 .................
 other stuff
 .................
  <?php
   foreach($list as $l): ?>
  <form id="<?php echo $l->id;?>">
  <input type="text" value="<?php echo $l->pd;?>" name="pd">
  <input type="text" value="<?php echo $l->sf;?>" name="sf">
  <input type="submit" value="<?php echo $l->status;?>" class="add">
   </form>
   <?php
   endforeach; ?>

ajax_post.php只是插入查詢。

Answer 1

我不確定您的要求。 但是，您不要嘗試通過以下方式更改腳本代碼：

<script>
$(document).ready(function() {
  $( ".add" ).click(function(event) {
    event.preventDefault();
    $.ajax( {type:"POST", url:"ajax_post.php",
      data: $("#"+id).serialize(), cache:false, timeout:10000 
      success: function() {
        $("#list").empty()
        $("#list").load("list.php");
      }});
});});
</script>

目的是清理#list元素，並在ajax調用成功后重新填充它。

Answer 2

首先，將您的表單放在單獨的php文件中，以便我們可以使用AJAX對其進行調用，例如Forms.php。

頁面加載時，使用$.load()調用list.php $.load()

$('#list').load('list.php')

據我了解，該列表將包含表單，並且在提交表單時，您希望表單重新加載而無需刷新頁面。 這就是我的方法。

$('#list').on('submit', '#formIDfromPHP', function(){
    var data = $(this).serializeArray()
    $.post('ajax_post.php', data, function(result,status){
        console.log(result)
    })
    // Dynamically load it again without refresh.
    $('#list').load('list.php')

    // Or maybe you want to load the form only, hence the external forms.php
    // $('#list').load('form.php')

    // Prevents default form submission behaviour.
    return false;
})

希望這可以幫助。 干杯!