Ajax表单提交无结果答案

【问题标题】：Ajax form submit no resultAjax表单提交无结果
【发布时间】：2015-09-01 11:39:32
【问题描述】：

我有一个注册页面。如果所有字段都正确，我会进行 JQuery 验证，然后对 regForm.php 进行 AJAX 调用以上传新用户 - 非常基本。

我的问题

验证正在运行，但是当用户注册时，什么都没有发生。我没有收到成功或错误消息，没有任何内容写入数据库，Chrome 上的控制台也没有显示任何内容。所以我几乎被困住了。

我确定这只是一个小问题......也许我错过了什么？

HTML

 <div id="ajaxMsgDiv"></div>
        <form name="registration-form" id="regForm" method="post" action="regForm.php">
         <span id="sname-info" style="color:red"></span>
        Name: <br /><input type="text" id="sname" name="fName" onfocus="this.value='';" /><br />
        <span id="ssurname-info" style="color:red"></span>
        Surname:<br /> <input type="text" id="ssurname" name="fSurname" onfocus="this.value='';" /> <br />
        <span id="sspword-info" style="color:red"></span>
        Password:<br /><input type="text" id="spword" name="fPword" onfocus="this.value='';" /><br />
        <span id="sconfirmpword-info" style="color:red"></span>
        Confirm Pword:<br /><input type="text" id="sconfirmpword" name="pwordConfirm" onfocus="this.value='';" /><br />
         <span id="sEmail" style="color:red"></span>
        Email:<br /><input type="text" id="sEmail" name="sEmail" onfocus="this.value='';" /><br />
         <span id="sPhone-info" style="color:red"></span>
        Phone:<br /><input type="text" name="sPhone" id="sPhone" onfocus="this.value='';" /><br />
        Male<input type="radio" value="male"  name="sex">Female<input type="radio" value="female" name="sex"><br />
        <input type="submit" onclick="" value="Register" name="register" class="buttono" />
        </form>

JQUERY

    <script type="text/javascript">
$(function () {
    var form = $('#regForm');
    var formMessages = $('#ajaxMsgDiv');

    // Set up an event listener for the contact form.
    $(form).submit(function (e) {
        // Stop the browser from submitting the form.
        e.preventDefault();

        //do the validation here
        if (!validateReg()) {
            return;
        }

        // Serialize the form data.
        var formData = $(form).serialize();

        // Submit the form using AJAX.
        $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: formData
        }).done(function (response) {
            // Make sure that the formMessages div has the 'success' class.
            $(formMessages).removeClass('error').addClass('success');

            // Set the message text.
            $(formMessages).html(response); // < html();

            // Clear the form.
            $('').val('')
        }).fail(function (data) {
            // Make sure that the formMessages div has the 'error' class.
            $(formMessages).removeClass('success').addClass('error');

            // Set the message text.
            var messageHtml = data.responseText !== '' ? data.responseText : 'Oops! An error occured and your message could not be sent.';
            $(formMessages).html(messageHtml); // < html()
        });

    });

    function validateReg() {
        var valid = true;

        if (!$("#sname").val()) {
            $("#sname-info").html("(required)");
            $("#sname").css('background-color', '#FFFFDF');
            valid = false;
        }

         if (!$("#ssurname").val()) {
            $("#ssurname-info").html("(required)");
            $("#ssurname").css('background-color', '#FFFFDF');
            valid = false;
        }

         if (!$("#spword").val()) {
            $("#spword-info").html("(required)");
            $("#spword").css('background-color', '#FFFFDF');
            valid = false;
        }  


        if(!$("#sEmail").val()) {
        $("#sEmail-info").html("(required)");
        $("#sEmail").css('background-color','#FFFFDF');
        valid = false;
    }
    if(!$("#sEmail").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) {
        $("#sEmail-info").html("(invalid Email)");
        $("#sEmail").css('background-color','#FFFFDF');
        valid = false;
    }

        if(!$("#sPhone").val()) {
        $("#sPhone-info").html("(required)");
        $("#sPhone").css('background-color','#FFFFDF');
        valid = false;
    }

        return valid;
    }
})

【问题讨论】：

请求发送了吗？服务器的响应是什么？您可以在 devev tools/firebug 的网络选项卡中跟踪它。
@LazarevAlexandr 我认为这是请求没有以某种或其他原因发送的问题，因为我没有得到服务器的响应......
@Marilee 你可以在从提交按钮中删除这个onclick="" 后尝试一下吗？
@Jai 会告诉你..
@Jai 没有帮助...请求没有被发送我不明白为什么它没有被发送......这很奇怪我无法发现错误以挽救我的生命

标签： javascript php jquery html ajax

【解决方案1】：

您的验证函数总是返回“false”，这就是不发送请求的原因。发生这种情况是因为电子邮件验证从未通过：

if(!$("#sEmail").val()) {
}

反过来，发生这种情况是因为您有一个跨度和一个具有相同 id 的输入。尝试改变它：

<span id="sEmail" style="color:red"></span>

看我的小提琴：http://jsfiddle.net/9cs65xfn/

【讨论】：