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

php

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

只是我想在“添加作者”按钮单击而不刷新页面时在 index.html 页面上添加名称和年龄文本框。但是上面的代码只加载名称和年龄文本框一次。每次单击按钮时我都想要它。

编辑：

现在，如果我想放置另一个按钮“删除作者”，并且想要执行完全相反的操作（即）删除两个文本框。我该怎么办？你能帮忙吗？

并想知道如何检查验证服务器端？

请帮忙。

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>