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>

表单处理器如下所示：

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

为什么不取出.empty()

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

或尝试

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

Answer 2

你可以检查一下firebug，缓存是否搞砸了请求。我有一个类似的问题，并开始给一个随机的id和param和它运作良好。

正确的方法是启用Cache-Control标头（或）将过去时间设置为到期时间。

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

2 个答案: