javascript - 尝试使用 jQuery 执行 AJAX 不起作用

Question

我正在尝试将 AJAX 与 jquery 结合使用……这就是我正在尝试做的事情:

    <div class="form">
            <form name="contact" class="js-form-contact" action="contact.php" method="post">
                <div class="clearfix">
                    <label>Mail</label>
                    <div class="input">
                        <input type="text" size="44" name="mail"/>
                    </div>

                    <div class="clearfix">
                        <label>Message</label>
                        <div class="input">
                            <textarea rows="6" name="message"></textarea>
                        </div>
                    </div>

                    <!-- recaptcha -->

                    <br/>

                    <div class="submit">
                        <input type="submit" class="btn primary" value="Enviar"/>
                    </div>

                    <div id="quote">
                        <p> :D </p>
                    </div>
                </div>  
            </form>
        </div>          
    </div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("btn primary").click(function(){
            $.ajax({
                type: "post",
                url: "contact.php",
                data: $('.js-form-contact').serialize(),
                success: function(data) {                                               
                    $('.js-form-contact .btn primary').attr("disabled", true);
                    $('#quote').html("Rock!!");
                    // $('.column:first-child .box').after('<p class="msg">' + data + '</p>');  
                }
            });         
        });
    });
</script>

contact.php 只是在做“echo “Hello”；”目前。当我单击提交按钮时，浏览器转到 contact.php 并回显“Hello”...

这里有什么问题？ ，我对 JS 和 jQuery 很陌生，所以请原谅我的笨拙 :)

Answer 1

您的 jQuery 选择器有误。它应该是 $(".btn.primary")。 . 表示它是您要查找的元素的类。类之间没有空格意味着元素应该匹配所有这些类。

此外，您可能应该使用 event.preventDefault()以防止点击事件冒泡到有机提交处理程序。

把钱放在嘴边...

// Note the parameter in the click-handler declaration
$(".btn.primary").click(function (event) {
    event.preventDefault();

    // Do ajax magic here
});