我的 jquery ajax 表单不会发布

Question

以下是我目前正在编写的代码，它将是一个评论系统，流程：

1. 用户填写意见表

2. 点击提交，进行 AJAX 调用并 POST 到 php 脚本

3. 脚本确定用户是否应该 输入验证码表格

4. 如果他们需要验证码表单，它会发送 那个回应和那里一起回来 净化消息

5. 如果他们不需要验证码，它 清理消息并发送 返回成功响应

6. 如果出现错误，它会发送 返回错误消息。

7. 如果成功，我们还会添加消息 到页面

好吧，到目前为止我的问题是，当我点击提交时，它会重新加载页面而不是进行 ajax 调用，你有什么明显的原因吗？

<script type="text/javascript">
$(document).ready(function () {
    $('#load').hide();
    //load facebox
     $('a[rel*=facebox]').facebox() 
});


// add comments
var messageArea = $('textarea#message');
$('input#submit-comment').click(function () {
    // Store vars
    var message = messageArea.hide().val();
    var dataString = 'message=' + message + '&u=1';

    //send comment to php
    $.ajax({
        type: "POST",
        url: "process.php",
        data: dataString,
        dataType: "json",
        success: function (data) {
            if (json.response == 'captcha') {
                //they are mass posting so we need to give them the captcha form
                // maybe we can open it in some kind of dialog like facebox
                // have to figure out how I can pass the comment and user data to the captcha script and then post it
                jQuery.facebox(function () {
                    jQuery.get('captchabox.php', function (data) {
                        jQuery.facebox('<textarea>' + data + '</textarea>')
                    })
                })
                alert('captcha');
            } else if (json.response == 'error') {
                // there was some sort of error so we will just show an error message in a DIV
                // just an alert for testing purposes
                alert('sorry there was an error');
            } else if (json.response == 'success') {
                alert('sucess');
                // success append the sanitized-comment to the page
                $('#comments').prepend(obj.comment);
            };
        }
    })
    return false;
});
</script>

<div id="container">
    <div id="comments">
<!-- comments loop will be here from mysql results -->
        <div class="comment">
            <div class="date">
                <span class="day-month"><?php echo $dayMonth; ?></span>
                <span class="year"><?php echo $year; ?></span>
            </div>
            <span class="content"><?php echo stripslashes($message);?> <span class="time"><?php echo $datediff; ?></span></span>
            <div class="clear"></div>
        </div>
<!-- end comment loop-->
    </div>
    <div id="submission">
        <form name="comment-submission">
            <textarea id="message" name="message"></textarea>
            <span class="limit">140</span>
            <input type="submit" id="submit-comment" value=" " />
        </form>
        <div class="clear"></div>
    </div>
</div>

更新：

我添加了返回 false；就在关闭ajax调用下方的click函数之前，但它对页面没有任何改变，它仍然会在点击时重新加载页面，请帮助

Answer 1

你需要“return false;”在您的 click() 事件结束时，或更改

<input type="submit"...>

到

<input type="button"...>

Answer 2

在拨打$.ajax() 后添加return false;。这将阻止提交元素的默认操作。

Answer 3

您需要从按钮的点击处理程序中返回 false，以防止页面发布。