使用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>