来自ajax加载div的jQuery帖子

时间:2014-03-06 17:30:49

标签: javascript php jquery html ajax

似乎无法想出这一个。我有一个页面,其中一个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只是插入查询。

2 个答案:

答案 0 :(得分:0)

我不确定您的要求。但是,您不能尝试使用以下内容更改脚本代码:

<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调用成功后重新填充它。

答案 1 :(得分:0)

首先,将表单放在一个单独的php文件中,以便我们可以使用AJAX调用它,例如forms.php。

加载页面后,您可以使用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;
})

希望这会有所帮助。 干杯!