使用 AJAX/JQuery 提交表单并显示结果而无需重新加载

Question

我尝试使用 jquery 和 ajax 提交表单并显示结果而不重新加载。就像典型的 ajax 评论设置一样。

我的 HTML 设置如下：

    <form id="create_new_heading" action="/display.php?brand=1" method="post">

          <label for="entry">Heading:</label><br/>
          <input type="text" id="heading" name="heading" maxlength="150"/><br/>

          <input type="submit" value="Add this Heading" />
    </form>
    <div id="result">

   </div>

JS:

    <script>
      /* attach a submit handler to the form */
      $("#create_new_heading").submit(function(event) {

        /* stop form from submitting normally */
        event.preventDefault(); 

        /* get some values from elements on the page: */
        var $form = $( this ),
            term = $form.find( 'input[name="heading"]' ).val(),
            url = $form.attr( 'action' );

        /* Send the data using post and put the results in a div */
        $.post( url, { s: term },
          function( data ) {
              var content = $( data ).find( '#test_me' );
              $( "#result" ).empty().append( content );
          }
        );
      });
    </script>

Form Processor 如下所示：

public function write($p) {
    if ( $_POST['type'] )
      $type = mysql_real_escape_string($_POST['type']);
    if ( $_POST['heading'])
      $heading = mysql_real_escape_string($_POST['heading']);
    if ( $type && $heading ) {
      $uniqueid = uniqid();
      $sql = "INSERT INTO headings VALUES('$type','$heading','$uniqueid')";
      return mysql_query($sql);
    } else {
      return false;
    }
  }

我尝试遵循 jquery 文档来实现此功能，但我似乎无法让它工作。表单提交，条目被放入数据库，但我仍然需要刷新页面才能看到新条目。知道我做错了什么吗？

Answer 1

你可以检查一下萤火虫，缓存是否会破坏请求。
我遇到了类似的问题，并开始提供 random_id 以及参数和
效果很好。

正确的方法可以是启用缓存控制标头（或）将过去的时间设置为到期时间。

Answer 2

为什么不取出 .empty()

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

或者尝试

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