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>

我希望这会对你有所帮助。

功能不发送数据

1 个答案: