Question

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

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

剧本的演职员表和演示：Original Script Here

上面链接提供的脚本，如果我按原样尝试它，但我必须修改它以满足我的需要，这就是我所拥有的。

表格：

<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>

查询

评论-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

这有效：

import time

Answer 2

您的jQuery事件处理程序引用了一个不存在的jQuery对象。尝试用以下代码替换事件处理程序的第一行：

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

AJAX：表单提交发表评论

2 个答案: