Jquery ajax 表单未提交。直接进入误差函数答案

【问题标题】：Jquery ajax form not submitting. going straight to error functionJquery ajax 表单未提交。直接进入误差函数
【发布时间】：2013-09-10 17:33:11
【问题描述】：

我有一个表单，用户可以在其中注册时事通讯，但我无法正确提交。

当我单击提交按钮时，我会收到一条提示“失败”的警报，因此 ajax 请求会直接进入 ajax 请求中的错误捕获。

在我的 php 中，我获取了所有 $_POST 变量并将它们插入到数据库中，我知道该脚本正在运行。我只是想将消息返回给ajax成功，以便将消息显示给用户。

我到处寻找解决方案，但找不到。

<?php
    echo "done";
?>

以及带有jquery的表单

<html>
<head>
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {

        $('#mlbutton').click(function() {

            var name = $('#mlName').val();
            var email = $('#mlEmail').val();

            $.ajax({
                type:'POST', 
                url: 'storeAddress.php',
                data:$('#addressform').serialize(),
                success: function(response) {
                    $('#addressform').find('#response').html(response);
                    alert(response);
                },
                complete: function() {
                    $('#addressform').each(function() {
                        this.reset();
                    });
                },
                error: function(){
                    alert('failure');
                }
            });
        });
    });
</script>
</head>
<body>
<form id="addressform">
    <div class="textl1"><label id="namLbl" for="mlName">Name</label><input type="text" id="mlName" name="mlName" /></div>
    <div class="textl1"><label id="emlLbl" for="mlEmail">Email</label><input type="text" id="mlEmail" name="mlEmail" /></div>
    <div class="textr1"><input type="submit" id="mlbutton" name="mlbutton" value="dffhfdh" class="button-signup" /></div>
    <p id="response" style="text-align: left"> </p>
</form>
</body>
</html>

更新

添加了 e.preventDefault(); //调用阻止事件的默认值

这现在停止了失败消息，但似乎没有调用 php 文件。我已经测试了 php 文件，因为没有提供电子邮件地址，所以我收到了一条我期待的消息。如果我只是单击表单而不输入电子邮件地址，我会收到相同的消息，但什么也没有。如果我确实输入了一个电子邮件地址，我希望该电子邮件在数据库中，但没有任何反应。好像没有调用php文件

【问题讨论】：

event.preventDefault();
您的文件存在吗？ storeAddress.php?
尝试在浏览器中使用某种开发者工具来查看请求和响应（例如，尝试在浏览器中单击 F12）。
@undone，是的，文件存在

标签： php jquery

【解决方案1】：

可能应该阻止表单的默认操作。

$('#mlbutton').click(function(e) { //added event as argument
    e.preventDefault(); //call prevent default on event
    var name = $('#mlName').val();
    var email = $('#mlEmail').val();

    $.ajax({
        type:'POST', 
        url: 'storeAddress.php',
        data:$('#addressform').serialize(),
        success: function(response) {
            $('#addressform').find('#response').html(response);
            alert(response);
        },
        complete: function() {
            $('#addressform').each(function() {
                this.reset();
            });
        },
        error: function(){
            alert('failure');
        }
    });
});

【讨论】：

我试过了，它确实防止了表单无法提交的失败消息。我期待一条消息，但什么都没有……有什么想法吗？
警报是否被触发？所以你希望ajax请求发生，然后表单提交？告诉我更多关于你期望发生的事情。
用户填写表格并点击提交按钮。 Ajax 应该将表单提交到 storeAddress.php。 StoreAddress.php 获取 POST 变量并插入到数据库中。如果插入 Ok 然后向用户显示一条消息，确认否则显示和错误消息。
@AdRock 好的，所以您不需要表单来实际提交。尝试将alert(response) 移动到成功处理程序的第一行，它会发出警报吗？
您使用的是 Firefox 吗？萤火虫？让我们用这个来聊天（jQuery），我们可以很快弄清楚。

【解决方案2】：

您需要阻止您的按钮提交页面，以便 AJAX 可以运行。

$('#mlbutton').click(function(e) {
    e.preventDefault();
    ....

【讨论】：