在 ajax Post 上获取 XMLHttpRequest 错误答案

【问题标题】：Getting XMLHttpRequest erros on ajax Post在 ajax Post 上获取 XMLHttpRequest 错误
【发布时间】：2016-03-03 08:26:19
【问题描述】：

我有一个模式，其中有一个我希望用户能够提交电子邮件的表单。我像往常一样设置了 ajax 帖子，但是，帖子一直失败。当它发生时，我在控制台中收到以下两个错误。

不推荐为同步请求设置 XMLHttpRequest.withCredentials

不推荐使用主线程上的同步 XMLHttpRequest，因为它对最终用户的体验产生不利影响。

有趣的是，电子邮件有时会发送而不管错误如何，但有时也不会。

这是我的 HTML：

<form class="cmxform" id="contactForm" >
    <div class="row">
        <div class="col-xs-6">    

                <label class="col-md-12 control-label" style="text-align: left;" >Name</label>
                <div class="col-md-12">
                    <input required class="form-control" id="FromName" name="FromName" style="margin-bottom: 10px;" type="text" value=""/>
                </div>

        </div>
        <div class="col-xs-6">

                <label class="col-md-12 control-label" style="text-align: left;" >Email</label>
                <div class="col-md-12">
                    <input required class="form-control" style="margin-bottom: 10px;" id="FromEmail" name="FromEmail" type="text" value=""/>
                </div>

        </div>

    </div>

        <label class="col-md-12 control-label" >Message</label>
        <div class="col-md-12">
            <textarea required class="form-control contact-message" cols="20"  id="Message" name="Message" rows="2"></textarea>

        </div>


    <div class="col-md-12">
        <input type="submit" class="btn btn-info" value="Submit" />
    </div>


</form>

还有我的 JS：

function sendMessage(messageData) {

    $.ajax({
        async: true,
        url: '/api/SendMessageApi',
        type: 'POST',
        data: messageData,
        success: function () {

        },
        error: function (ex) {
            alert('there was an error');
        }
    });
}


$("#contactForm").submit(function () {

    var name = $('#FromName').val();
    var email = $('#FromEmail').val();
    var message = $('#Message').val();

    var messageData = { Name: name, Email: email, Message: message };

    sendMessage(messageData); 
});

任何帮助将不胜感激！

【问题讨论】：

您必须阻止表单上的提交事件才能让您的 ajax 请求有机会完成
我愿意试一试！这是一件很难完成的事情吗？
好的，我尝试从我的提交按钮中删除 type='submit' 并将 js 方法更改为单击事件，它似乎正在工作。谢谢！
有没有办法延迟提交事件，直到 ajax 调用完成？

标签： javascript jquery html ajax asp.net-mvc-5

【解决方案1】：

要在ajax成功后提交form，可以使用：

function sendMessage(messageData) {

    $.ajax({
        context: this, // set context to the form
        async: true,
        url: '/api/SendMessageApi',
        type: 'POST',
        data: messageData,
        success: function () {
            this.submit(); // submit form on success
        },
        error: function (ex) {
            alert('there was an error');
        }
    });
}


$("#contactForm").submit(function (e) {
    e.preventDefault();
    var name = $('#FromName').val();
    var email = $('#FromEmail').val();
    var message = $('#Message').val();

    var messageData = { Name: name, Email: email, Message: message };

    sendMessage.call(this, messageData); // set context to the form
});

【讨论】：