如何動態更改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個輸入框和一個提交按鈕。 並且replace div ajax腳本不適用於選擇性div。 它只會覆蓋1。

現在，合乎邏輯的結論是將“ i”附加到表單id和div id，創建唯一的ID，然后修改ajax代碼以接受這些動態創建的id。 但是，我缺乏Ajax知識，而且我不知道如何使Ajax函數適用於每種形式。

（在php FOR / WHILE周期中，我可以生成4個Ajax代碼塊（在此示例中），但是，例如，如果我將100種形式應用於這些功能，則效率似乎並不高。該周期實際上會創建100個唯一的id ajax每個表單/ div的腳本）

Answer 1

訣竅是使用類選擇器而不是ID選擇器：

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

看看這個小提琴http://jsfiddle.net/kdRY7/

Answer 2

關鍵是使用類而不是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; ?>">都回顯了一個輔助類class="wwage wwage-<?php echo $i; ?>">這樣，如果出於某些原因您想要要從另一種形式中選擇一種形式，可以通過$(".wwage-4")輕松完成，其中4表示循環中適當的$i值。