Question

以下是我正在处理的代码，它将是一个评论系统，流程：

用户填写评论表
点击提交，进行AJAX调用 POST到php脚本
脚本确定用户是否应该输入验证码表格
如果他们需要验证码表单，则会发送那个回应随之而来消毒消息
如果他们不需要验证码，那就是清理消息并发送消息回复成功回应
如果发生错误则发送错误消息。
如果成功，我们也会添加消息到页面

好了我的问题到目前为止，当我点击提交时，它会重新加载页面而不是执行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>

更新：

我补充说假;就在关闭ajax调用下面的click函数之前，但它没有对页面进行任何更改，它仍然会在点击时重新加载页面，请提供任何帮助

Answer 1

你需要“回归假”;在click（）事件结束时，或更改

<input type="submit"...>

到

<input type="button"...>

Answer 2

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

Answer 3

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

我的jquery ajax表格不会发布

3 个答案: