尝试用jQuery执行AJAX是行不通的

Trying to perform AJAX with jQuery doesn't work

本文关键字：行不通 AJAX 执行 jQuery 更新时间：2023-09-26

我正在尝试使用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的新手，所以请原谅我的笨拙:)

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

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

说到做到

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