函数不发送数据[重复]答案

【问题标题】：Function doesn't send data [duplicate]函数不发送数据[重复]
【发布时间】：2016-07-22 15:39:47
【问题描述】：

我有以下代码。问题是ajax不发送数据，我不知道为什么。似乎问题可能出在javascript函数中。你能帮帮我吗？

当我将提交按钮放在表单之外时，它可以工作，为什么？

<div class="modal fade" id="form-content" tabindex="-1" role="dialog" style="display: none; ">
    <div class="modal-dialog">
        <div class="modal-content">         
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12 text-center">
                        <div class="pop-up">                             
                            <div class="box-1">
                                <h3>Fill email</h3>                                    
                            </div>
                            <img src="img/6.png" class="center-block" alt="..">
                            <div class="form-search space40">
                                <form class="contact">
                                    <div class="input-group input-group-lg mtop-10">
                                        <input type="text" name="Email" class="form-control input-lg" placeholder="email">
                                        <span class="input-group-btn">
                                            <button id="submit" class="btn btn-lg-sub model-btn" name="name">submit</button>
                                        </span> 
                                    </div> 
                                </form>   
                            </div>
                            <div class="space30"></div>
                            <div>
                            </div>
                            <div class="space30"></div>
                        </div>
                    </div>
                </div>                       
            </div>                        
        </div>                  
    </div>
</div>

$(function() {
    $("button#submit").click(function(){
        $.ajax({
            type: "POST",
            url: "process.php",
            data: $('form.contact').serialize(),
            success: function(msg){
                $("#thanks").html(msg)
                $("#form-content").modal('hide'); 
            },
             error: function(){
                 alert("failure");
             }
        });
    });
});

【问题讨论】：

您是否尝试将type="submit" 设置为您的按钮？
点击按钮时，浏览器控制台显示任何错误？
@demo — 这是默认设置

标签： javascript ajax forms submit

【解决方案1】：

没有type属性的按钮被认为是提交按钮，所以当你点击按钮时你需要防止提交表单的默认行为，或者你可以添加type="button"：

$(function() {
    $("button#submit").click(function(e) {
        e.preventDefault(); //You need this
        $.ajax({
            type: "POST",
            url: "process.php",
            data: $('form.contact').serialize(),
            success: function(msg) {
                $("#thanks").html(msg)
                $("#form-content").modal('hide');
            },
            error: function() {
                alert("failure");
            }
        });
    });
});

或者：

<button id="submit" type="button" 
        class="btn btn-lg-sub model-btn" 
        name="name">submit</button>

希望对你有帮助。

【讨论】：