如何动态更改 div 内容

Question

我正在寻找“在不刷新页面的情况下更改 php 中的 div 内容”，我找到了以下内容并应用了它：

<script>
$(document).ready(function(){
$('#wwage').submit(function() 
{
    $.ajax(
    {
        data: $(this).serialize(),
        type: $(this).attr('method'),
        url: $(this).attr('action'),
        success: function(response) 
        { 
            $('#wwritemsg').html(response);
        }
    });
    return false;
});
});
</script>

<?php 
    $i=1;
while ( $i<5) 
{ ?>
       <form action="response.php" method="post" name="swages" id="wwage">
          <input name="wpw<?php echo $i; ?>" type="text" value="<?php echo $foo; ?>" />
       <input name="setfoo" type="submit" value="Submit" />
       <div id="wwritemsg">
          <?php  echo "Default pre-submit text.";?>
       </div>
       $i=$i+1;
    }

此代码将创建 4 个表单，每个表单有 1 个输入框和一个提交按钮。并且替换 div ajax 脚本不适用于选择性 div。它只会覆盖 1。

现在，合乎逻辑的结论是将“i”附加到表单 id 和 div id，创建唯一的，并修改 ajax 代码以接受这些动态创建的 id。但是我缺乏 ajax 知识，我不知道如何使 ajax 函数适用于每种形式。

（我可以使用 php FOR/WHILE 循环（在本例中）生成 4 个 ajax 代码块，但如果我有 100 个表单来应用这些函数，它似乎效率不高。这个循环实际上会创建 100 个每个表单/div 的唯一 id ajax 脚本）

Answer 1

关键是使用类而不是 ID。

HTML：

<form action="response.php" method="post" name="swages" class="wwage wwage-<?php echo $i; ?>">

JavaScript：

$('.wwage').submit(function()

您会注意到，在 while 循环期间的 HTML 部分中，它会为每个“唯一”class="wwage wwage-<?php echo $i; ?>"> 的表单回显一个辅助类，如果出于某种原因您想从另一个表单中选择一个表单，您可以$(".wwage-4") 很容易做到这一点，其中 4 表示循环中适当的 $i 值。

Answer 2

诀窍是使用类选择器而不是 ID 选择器：

 $('.wwage').submit(function() {
    alert(this.id);
    event.preventDefault();
 }
 ) ;

看看这个小提琴http://jsfiddle.net/kdRY7/