javascript - 提交 ajax 表单后未出现成功消息

Question

我准备了一个由 Jquery 和 PHP 支持的 HTML 表单。该表单在 PHP 中给出了正确的输出，但是当提交表单时，它没有显示成功消息并且没有将字段清空。代码如下:

   function sendContact() {
        event.preventDefault();

        var valid;
        valid = validateContact();
        if (valid) {
            jQuery.ajax({
                // input submisssion though Ajax
                url: "xxxx.php",
                data: 'userName=' + $("#userName").val() + '&userEmail=' + $("#userEmail").val() + '&subject=' + $("#subject").val() + '&content=' + $(content).val(),
                type: "POST",
                success: function (data) {
                    // Thankyou message on sucessful submission.
                    $("#mail-status").html(data);
                    $('#mail-status').show();

                    // Clear the form.
                    $('#userName').val('');
                    $('#userEmail').val('');
                    $('#content').val('');
                },
                error: function () {
                }
            });
        }
    }

    //error checking
    function validateContact() {
        var valid = true;
        $(".InputBox").css('background-color', '');
        $(".info").html('');

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

        return valid;
    }

使用的 AJAX 库是:https://code.jquery.com/jquery-2.1.1.min.js “类型=”文本/javascript HTML 代码是:

<div id="frmContact">
<div id="mail-status" style="display: none;">Thanking you.</div>

        <label style="padding-top:20px;">Name</label><span id="userName-info" class="info"></span><br/>
        <input type="text" name="userName" id="userName" class="InputBox"><br>

        <label>Email</label><span id="userEmail-info" class="info"></span><br/>
        <input type="text" name="userEmail" id="userEmail" class="InputBox"><br/>

        <label>Content</label><span id="content-info" class="info"></span><br/>
        <textarea name="content" id="content" class="InputBox" cols="25" rows="6"></textarea><br/>

        <button name="submit" class="btnAction" onClick="sendContact();">Send</button>
</div>    

我没有检查任何网站并在谷歌上搜索了正确的代码但找不到？。你能找出正确的那个吗？

Answer 1

你的错误

XMLHttpRequest cannot load xxxx.php. No 'Access-Control-Allow-Origin' header is present on the requested resource.

表示在您的配置文件中您没有任何信息说明如何处理 CORS(跨源)请求，因此您必须在您的平台上启用 CORS...请参阅此处:http://enable-cors.org/server.html并选择您的平台(Tomcat...Apache...)

另请在此处检查浏览器是否支持 CORS:http://enable-cors.org/client.html