javascript - Jquery ajax post 在表单提交上创建第二个表单

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);
}