AJAX：表单提交以发表评论

Question

我在获取表单提交并显示评论而不刷新页面（就地）时遇到问题，但是当我单击按钮时，它带我到页面顶部，但不执行任何操作，没有插入数据库，因此不会在页面中显示注释。

应该将注释放置在具有淡入淡出效果的适当位置。

脚本的鸣谢和演示： 原始脚本在这里

我在上面的链接中提供的脚本可以在尝试时进行操作，但是我必须对其进行修改以满足我的需要，这就是我所拥有的。

表格：

<div class="comment-form">
    <form id="form" action="" method="post">
        <div class="top-form">
            <span class="parent name">
                <input class="field" type="hidden" name="Name" value="<?php echo $_SESSION["UserName"]; ?>" />
                <input class="field" type="text" name="Name" value="<?php echo $_SESSION["UserName"]; ?>" disabled="disabled">
            </span>
            <span class="parent name">
                <input class="field" type="hidden" name="ID" value="<?php echo $_SESSION["UserID"]; ?>" />
                <input class="field" type="text" name="ID" value="<?php echo $_SESSION["UserID"]; ?>" disabled="disabled"> 
            </span>
            <span class="parent last">
                <input class="field" type="hidden" name="PageID" value="<?php echo $_GET['PageID']; ?>" />
                <input class="field" type="text" name="PageID" value="<?php echo $_GET['PageID']; ?>" disabled="disabled">  
            </span>
            <div class="clear"></div>
        </div>
        <div class="bottom-form">
        <label>Choose an Option</label>
        <select id="commentbox" name="comment" class="bs-select form-control">
            <option disabled selected value> -- Options -- </option>
            <option value="First Option">First Option</option>
            <option value="Second Option">Second Option</option>
            <option value="Third Option">Third Option</option>
        </select>
        <button class="btn btn-icon submit" name="btn-sumbit" type="submit" id="submit" value="Post Message"><span class="icon"></span>Post Message</button>
        </div>
    </form>
</div>

<div class="comments">
    <div class="section-title">
        <h3>Messages</h3>
    </div>
    <ul class="level-1">
    <div class="comment-block">
    <?php echo $postedcomments; ?> <!-- loads previous comments on page load. it works. -->
    </div>
    </ul>
</div>

剧本

与表单位于同一页面上。

<script>
$(document).ready(function(){
  var form = $('form');
  var submit = $('#submit');

  form.on('btn-submit', function(e) {
    // prevent default action
    e.preventDefault();
    // send ajax request
    $.ajax({
      url: 'data/queries/comment-insert.php',
      type: 'POST',
      cache: false,
      data: form.serialize(), //form serialized data
      beforeSend: function(){
        // change submit button value text and disabled it
        submit.val('Posting...').attr('disabled', 'disabled');
      },
      success: function(data){
        // Append with fadeIn see http://stackoverflow.com/a/978731
        var item = $(data).hide().fadeIn(800);
        $('.comment-block').append(item);

        // reset form and button
        form.trigger('reset');
        submit.val('Post Message').removeAttr('disabled');
      },
      error: function(e){
        alert(e);
      }
    });
  });
});
</script>

查询

comment-insert.php

<?php
if (isset( $_SERVER['HTTP_X_REQUESTED_WITH'] )):
include_once 'include/dbconfig.php';
include_once 'include/dbconnection.php';
$conn = dbconnect();

if (!empty($_POST['comment'])) {
        $Name = mysqli_real_escape_string($conn, $_POST['Name']);
        $PageID = mysqli_real_escape_string($conn, $_POST['PageID']);
        $ID = mysqli_real_escape_string($conn, $_POST['ID']);
        $Comment = mysqli_real_escape_string($conn, $_POST['comment']);

        $sql = "INSERT INTO comments
        (PageID, PosterID, PosterName, PostDate, Comment)
        VALUES
        ('$PageID', '$ID', '$Name', now(), '$Comment')";

        mysqli_query($conn, $sql) or die("Error: ".mysqli_error($conn));    
}
?>

<li><span class='comment'>
<span class='picture'>
<span><img src='users/images/<?php echo $_SESSION['Image'] ?>'></span>
</span>
<span class='content'><span class='title'><b><?php echo $Name ?></b>, Said:</span><br><?php echo $Comment ?></span>
<span class='clear'></span>
</span>
</li>

<?php
    mysqli_close($conn);
endif?>

Answer 1

这有效：

$(document).ready(function() {
    //var form = $('#form');
    //var submit = $('#submit');

    $('#submit').on('click', function(e) {
        e.preventDefault(); 
        // the rest of your code goes here
    })
});

Answer 2

您的jQuery事件处理程序引用的是不存在的jQuery对象。 尝试以此替换事件处理程序的第一行：

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