使用ajax加載內容

Question

我是ajax的新手。

我的index.html

<script> 
$(document).ready(function(){ 
    $("button").click(function(){ 
    $.ajax({url:"n.php",success:function(result){ 
     $("#div1").html(result); 
    }}); 
    }); 
}); 
</script> 

<div id="div1" style="margin-left: 25;"></div> 
<button>Add Author</button> 

n.php

Name:<input type="text" name="txtname"> 
age:<input type="text" name="txtage"> 

只要我想要的index.html頁面上添加名字和年齡的文本框時， '添加作者' 按鈕點擊不刷新頁面。但上面的代碼只加載名稱和年齡文本框一次。我每次點擊按鈕時都需要它。

編輯：

現在，如果我想提出另一個按鈕「刪除作家」，並要執行完全相反的動作（即）刪除這兩個textboxes.what應該怎麼辦？你可以幫忙嗎？

並想知道如何檢查驗證服務器端？

請幫忙。

Answer 1

更改此

$("#div1").html(result); 

到

$("#div1").append(result); 

所以每次你點擊該按鈕，將追加文本框。

Answer 2

嘗試以下操作：

<script> 
$(document).ready(function(){ 
    $("button").click(function(){ 
    $.ajax({url:"n.php",success:function(result){ 
     $("#div1").append(result); 
    }}); 
    }); 
}); 
</script> 

使用append代替html。 append將在div中出現任何內容的末尾添加響應，其中html將替換當前內容。

Answer 3

<script> 
    $(document).ready(function(){ 
    $("button").click(function(){ 
    $.ajax({url:"n.php",success:function(result){ 
    $("#div1").append(result); 
    }}); 
    }); 
    }); 
    </script> 

    <div id="div1" style="margin-left: 25;"></div> 
    <button>Add Author</button>