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正在做“回声”你好“;”目前。当我点击提交按钮时，浏览器会转到contact.php，它回应“你好”......

这里有什么问题？，我对JS和jQuery很新，所以请用我的noobishness裸露：）

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
});

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

1 个答案: