AJAX 表单提交给自己？答案

【问题标题】：AJAX Form is submitting to itself?AJAX 表单提交给自己？
【发布时间】：2012-02-13 04:20:56
【问题描述】：

我不知道今晚发生了什么，但我似乎无法让 AJAX 工作。提交表单后，它会使用 URL 中的值刷新页面。我正在使用一个具有提交处理程序的验证插件，但它仍然会刷新。我以前用过这种方法，没有任何问题。看看这里的页面，让我知道你的想法：

http://www.jacobsmits.com/demos/jquery_ajax.html?firstName=&lastName=&email=&message=&contactSubmit=

<div class="demo_content" style="display:none">
    <form id="contact_form">
        <span class="inputSpan">
            <input value="" class="input input1" title="First name" id="firstName" name="firstName" type="text" />
        </span>
        <span class="inputSpan">
            <input value="" class="input input2" title="Last name" id="lastName" name="lastName" type="text" />
        </span>
        <span class="inputSpan">
            <input value="" class="input input2" title="Email" id="email" name="email" type="text" />
        </span>
        <span class="inputSpan">
            <textarea type="text" id="message" name="message" title="Message" class="input textArea" ></textarea>
        </span>

        <span class="inputSpan">
            <input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
        </span>
        <div id="contact_ajax_wrap">
            <div id="contact_ajax_gif" style="display:none;"><img src="http://www.jacobsmits.com/images/main/ajax-loader-black.gif" width="32" height="32" /></div>
            <div id="contact_ajax_success" style="display:none">Thanks! I'll get back to you shortly.</div>
        </div>
    </form>

<script type="text/javascript">
    //This script will handle the email form
    $(window).load(function() {
        $('#contact_form').placeholderRX({textColor: '#999', hoverColor: '#FBFBFB', addClass: 'yourFormInputText'});
    });
    $(".button").click(function() {
        var dataString = "fname=" + $("#firstName").val();
        alert(dataString);
        $.ajax({
            type: "POST",
            url: "http://www.jacobsmits.com/demos/scripts/contact_form.php",
            data: dataString,
            success: function(result) {
                if(result == "Success"){
                    alert("Success");
                }else{
                    alert("Fail");
                }
            }
        });
    });
</script>

【问题讨论】：

能把负责表单提交的代码贴出来
即使是这个非常基本的实现也会导致页面刷新。它永远不会到达警报：成功。现在的php脚本也只是输出成功。
我非常接近于制作一个看起来像按钮的 div。
你错过了return false; 或e.preventDefault(). 看我的回答。

标签： javascript jquery ajax forms

【解决方案1】：

您需要取消提交按钮的默认行为（提交表单不是ajax）。
可以在事件对象上使用preverntDefault() 或使用return false; 来完成

   $(".button").click(function(e) {
        var dataString = "fname=" + $("#firstName").val();
        alert(dataString);
        $.ajax({
            type: "POST",
            url: "http://www.jacobsmits.com/demos/scripts/contact_form.php",
            data: dataString,
            success: function(result) {
                if(result == "Success"){
                    alert("Success");
                }else{
                    alert("Fail");
                }
            }
        });
        return false; /// <=== that was missing.
        e.preventDefault(); /// Or this.
    });

有一个提交事件，所以最好听这个事件而不是点击按钮：

   $("#contact_form").submit(function(e) {
        var dataString = "fname=" + $("#firstName").val();
        alert(dataString);
        $.ajax({
            type: "POST",
            url: "http://www.jacobsmits.com/demos/scripts/contact_form.php",
            data: dataString,
            success: function(result) {
                if(result == "Success"){
                    alert("Success");
                }else{
                    alert("Fail");
                }
            }
        });
        return false; /// <=== that was missing.
        e.preventDefault();  /// Or this.
    });

【讨论】：

非常感谢！你是一个救生员。这让我发疯了。

【解决方案2】：

你需要取消submit按钮的默认行为

$(".button").click(function(e) {
            e.preventDefault();
            //rest of your code here
            var dataString = "fname=" + $("#firstName").val();
            alert(dataString);
            $.ajax({

【讨论】：