函数不发送数据

Question

我有以下代码。问题是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");
             }
        });
    });
});

Answer 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>

希望对您有所帮助。

函数不发送数据

Function doesn't send data

javascript

forms

ajax

submit