IE 11 及以下版本中的 JavaScript 错误 ") expected "+ AJAX 无法在 IE 11 中工作

Question

我有一个脚本，其中 ajax 调用如下所示:

(function () {
var setup, validation;
var errorMessage = '';
var errorClass = '';
var element = '';
var errorElement = '';
var allOk = true;
var testTelefon = /^[0-9\-+]{2,40}$/;
var testEpostAdress = /^(?!.{65})\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

(function () {
    setup = {
        init: function () {
            this.initSendForm();
        },

        initSendForm: function () {
            var self = this;

            $('#helpContactForm').submit(function (event) {
                if (allOk) {
                    var formData = self.getFormData();
                    var url = $(this).attr("action");
                    $.ajax({
                        cache: false,
                        type: "POST",
                        url: url,
                        data: formData,
                        success: function (data) {
                            if (data.Success) {
                                self.resetFormData();
                                self.showModal(data);
                            }
                        },
                        error: function (data) {
                            self.showModal(data);
                        }
                    });
                }
                self.hideModal();
                event.preventDefault();
            });
        },

        getFormData: function () {
            var data = {
                'Namn': $('#namn').val(),
                'Email': $('#epost').val(),
                'Telefon': $('#telefon').val(),
                'Fraga': $('#fraga').val()
            };

            return data;
        },

        resetFormData: function () {
            $('#namn').val(''),
                $('#epost').val(''),
                $('#telefon').val(''),
                $('#fraga').val('')

            return true;
        },

        showModal: function (data) {
            $('#messageModalTitle').text(data.Caption);
            $("#messageModalBodyText").text(data.Message);
            $('#messageModal').modal('show');

            return true;
        },

        hideModal: function () {
            setTimeout(function () {
                $('#messageModal').modal('hide');
            }, 5000);

            return true;
        }
    };
})();

(function () {
    validation = {
        valideraFormularet: function (errorMsgs) {
            var errorMsgsArr = errorMsgs.split(","); //0=> Namn validerings meddel., 1=> Epost, 2=> Telefon, 3=> Fråga
            var epost = document.getElementById("epost");
            var telefon = document.getElementById("telefon"); 
            this.valideraNamnet(errorMsgsArr[0]);
            this.valideraEpostTelefon((errorMsgsArr[1] + ', ' + errorMsgsArr[2]), epost);
            this.valideraEpostTelefon((errorMsgsArr[1] + ', ' + errorMsgsArr[2]), telefon);
            this.valideraFraga(errorMsgsArr[3]);

            return false;
        },

        valideraNamnet: function (errorMsg) {
            var namn = document.getElementById("namn");
            var namnError = document.getElementById("namnError");
            if (namn.value == "") {
                this.setErrorMsgAndClass(namn, namnError, "input-validation-error", errorMsg);
            }
            else {
                this.setErrorMsgAndClass(namn, namnError);
                return true;
            }

            allOk = false;
            return false;
        },

        valideraEpostTelefon: function (errorMsg, ele) {
            var result = errorMsg.split(","); //0=> När båda saknas, 1=> När epost saknas, 2=> När telefon saknas
            var srcElement = document.getElementById(ele.id);
            var epost = document.getElementById("epost");
            var epostError = document.getElementById("epostError");
            var telefon = document.getElementById("telefon");
            var telefonError = document.getElementById("telefonError");
            var errorElement = srcElement === epost ? epostError : telefonError;
            var validEpost = testEpostAdress.test(epost.value);
            var validTelefon = testTelefon.test(telefon.value);

            if (epost.value == "" && telefon.value == "") {
                this.setErrorMsgAndClass(srcElement, errorElement, "input-validation-error", result[0]);
            }
            else if (!validEpost && !validTelefon) {
                this.setErrorMsgAndClass(srcElement, errorElement, "input-validation-error", srcElement === epost ? result[1] : result[2]);
            }
            else {
                this.setErrorMsgAndClass(srcElement, errorElement);
                return true;
            }

            allOk = false;
            return false;
        },

        valideraTelefon: function (errorMsg) {
            var result = errorMsg.split(",");
            var telefon = document.getElementById("telefon");
            var epost = document.getElementById("epost");
            var telefonError = document.getElementById("telefonError");
            var validTelefon = testTelefon.test(telefon.value);

            if (telefon.value == "" && epost.value == "") {
                this.setErrorMsgAndClass(telefon, telefonError, "input-validation-error", result[0]);
            }
            else if (validTelefon == false) {
                this.setErrorMsgAndClass(telefon, telefonError, "input-validation-error", result[1]);
            }
            else {
                this.setErrorMsgAndClass(telefon, telefonError);
                return true;
            }

            allOk = false;
            return false;
        },

        valideraFraga: function (errorMsg) {
            var fraga = document.getElementById("fraga");
            var fragaError = document.getElementById("fragaError");
            if (fraga.value == "") {
                fraga.style.borderColor = "#ffb6b6";
                this.setErrorMsgAndClass(fraga, fragaError, "input-validation-error", errorMsg);
            }
            else {
                fraga.style.borderColor = "#dddddd";
                this.setErrorMsgAndClass(fraga, fragaError);
                return true;
            }

            allOk = false;
            return false;
        },

        setErrorMsgAndClass: function (el, errorEl, nameOfClass = '', errorMsg = '') {
            element = el;
            errorElement = errorEl;
            errorClass = nameOfClass;
            errorMessage = errorMsg;
            this.setErrorMsgAndClassOnElements();
            return false;
        },

        setErrorMsgAndClassOnElements: function () {
            element.className = errorClass;
            errorElement.textContent = errorMessage;
            this.toggleSubmitBtn();
            return false;
        },

        toggleSubmitBtn: function () {
            allOk = errorClass == '' && $('.input-validation-error').length == 0 ? true : false;
            if (!allOk)
                document.getElementById("btnHelpFormSubmit").disabled = true;
            else
                document.getElementById("btnHelpFormSubmit").disabled = false;

        }
    };
})();
})();

这基本上是一个简单的“联系我们”表单。因此用户填写联系信息和问题。然后，表单被提交到服务器(一个 asp.net mvc Controller )，响应(json)以感谢消息的形式显示在 Bootstrap 模式中，并在 5 秒后自动消失。

现在，除了 IE 11 及更低版本之外，这在所有浏览器中都可以正常工作(是的，我们必须支持这些浏览器，因为我们在某些使用这些浏览器的国家/地区有用户)。

问题是，当在 IE 中提交表单时，它不会显示模式，而是要求用户下载(IE 窗口底部的小保存或打开消息)json 内容。IE 控制台中唯一的错误是“)预期”。虽然我已经检查了代码很多次并且其中没有缺少“)”(或者我忽略了？)。

这些可能是相互连接的问题，或者可能是 ajax 请求 block 中缺少某些内容，因此 IE 不会显示模式，而是向用户提供下载 json 内容的选项，并且此括号错误与其他内容相关。

需要帮助!

编辑:现在这是完整的代码。一些代码位于另一个 JS 文件中，我已将它们合并在一起，因此它看起来与 Chrome 的源代码 View 中的相同。

Answer 1

setErrorMsgAndClass 的函数定义有一些默认参数值。

... function (el, errorEl, nameOfClass = '', errorMsg = '') { ... }

不幸的是，没有任何版本的 Internet Explorer 可以处理这样的默认参数，请参阅 Default Parameters Browser Compatibility Table .

您可以使用“旧式”默认参数，类似于:

var x = function (el, errorEl, nameOfClass, errorMsg) {
  nameOfClass = (typeOf nameOfClass != 'undefined') ? nameOfClass : 'Default Class Name';
  errorMsg = (typeOf errorMsg != 'undefined') ? errorMsg : 'Default Error Message';

  // code
}

x(a,b,c,d); // works
x(a,b); // works using the defaults instead of c/d

还有其他处理默认参数的方法示例，这样旧版浏览器在上面链接的 MDN 页面的其余部分上就不会出现问题。