Jquery ajax表单没有提交。直接进入错误功能

Question

I have a form where users can sign up to a newsletter but i can't get it to submit properly. 我有一个表单，用户可以在其中注册简报，但我无法正确提交。

When i click the submit button, i get an alert saying "Failure" so the ajax request is going straight to the error catchment in the ajax request. 当我单击提交按钮时，我收到一条警告“失败”，因此ajax请求将直接进入ajax请求中的错误集合。

In my php, I get all the $_POST variables and insert them into the database and I know that script is working. 在我的PHP中，我获取所有$ _POST变量并将它们插入到数据库中，我知道该脚本正在运行。 I just want to return the message back to the ajax success so that the message can be displayed to the user. 我只想将消息返回到ajax成功，以便可以向用户显示消息。

I have looked everywhere for a solution and can't find one. 我到处寻找解决方案而找不到解决方案。

<?php
    echo "done";
?>

and the form with jquery 和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>

Update 更新

Added e.preventDefault(); 添加了e.preventDefault（）; //call prevent default on event //调用阻止事件的默认值

This now stops the failure message but it appears that the php file is not called. 这现在停止失败消息，但似乎没有调用php文件。 I have tested the php file and because no email address supplied I get a message i was expecting. 我已经测试了php文件，因为没有提供电子邮件地址，我得到了一个我期待的消息。 If i just click the form without entering an email address, I am expecting the same message but nothing. 如果我只是点击表格而不输入电子邮件地址，我期待相同的消息，但没有。 If i do enter an email address, I would expect the email to be in database but nothing happens. 如果我输入电子邮件地址，我希望电子邮件在数据库中，但没有任何反应。 It is like the php file is not being called 就像没有调用php文件一样

Answer 1

The could should prevent the default action of the form. 可以阻止表单的默认操作。

$('#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');
        }
    });
});

Answer 2

You need to prevent your button from submitting the page, so that the AJAX can run. 您需要阻止按钮提交页面，以便AJAX可以运行。

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

Jquery ajax表单没有提交。直接进入错误功能

问题描述

2 个解决方案

解决方案1
1 2013-09-06 15:04:36

解决方案2
1 2013-09-06 15:05:00

Jquery ajax表单没有提交。 直接进入错误功能

问题描述

2 个解决方案

解决方案1 1 2013-09-06 15:04:36

解决方案2 1 2013-09-06 15:05:00

Jquery ajax表单没有提交。直接进入错误功能

解决方案1
1 2013-09-06 15:04:36

解决方案2
1 2013-09-06 15:05:00