jQuery ajax发布在表单提交上创建第二个表单

Question

我有这个表格：

<form id='form'>
  Begin time<input id="begintime" type="text" name="begintime"><br>
  End time<input id="endtime" type="text" name="endtime"><br>
  <input name="submit" type="submit" value="Submit">
</form>

在我的网站上看起来像这样：

问题是我不希望刷新网页。所以我发表了这篇ajax帖子：

      $(function () {

    $('#form').on('submit', function (e) {

      e.preventDefault();

      var begin = $("#begintime").val();
      var end = $("#endtime").val();

      $.ajax({
        type: 'post',
        url: '',
        data: {begin: begin, end: end},
        success: function (result) {
            $( result ).appendTo('p');
        }
      });

    });

    });

但是每次单击提交都会发生：

我也用它来获取数据：

        <p>
<?php 
$begin = $_POST['begin'];
$end = $_POST['end'];
?>
</p>

我已经尝试过了：

   $('p').empty();

我将tihs放在ajax代码中，这是相同的结果。我究竟做错了什么？请帮忙。谢谢你。

Answer 1

请尝试以下代码。它将清除p标记内的所有内容并将表格附加到i

success: function (result) {
    $('p').html(result);
}

Answer 2

您应该只更改HTML，而不要像这样添加

...
success: function (result) {
    $('p').html(result);
}
...