jQuery POST 不使用 IE 11 提交表单值答案

【问题标题】：jQuery POST does not submit form values using IE 11jQuery POST 不使用 IE 11 提交表单值
【发布时间】：2020-01-17 13:01:45
【问题描述】：

我已经尝试了几个小时来解决这个问题，但是下面的代码根本不适用于 Internet Explorer 11。它适用于 Chrome 和 Firefox。使用 IE11 时，post 已提交，但提交的表单为空。

<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
            <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
        </head>
        <body>
            <form action="/Mandate/Edit" id="mandateForm" method="post">            
                <input id="ExternalId" name="ExternalId" type="hidden" value="" />
                <input id="mandateName" name="mandateName" type="text" />
                <a href="#" id="md-submit">Create</a>
            </form>
            <script type="text/javascript">
                $(function () {
                    $("#md-submit").on("click", function (e) {
                        e.preventDefault();
                        var form = $("#mandateForm");
                        var request = $.ajax({
                            type: "POST",
                            url: form.attr("action"),
                            data: {
                                mandateName: "test4711"
                            },
                            dataType: 'json',
                            cache: false
                        });
                    });
                });
            </script>
        </body>
    </html>

非常感谢您的帮助。

【问题讨论】：

你能在 Jsfiddle.net 中复制这个问题吗？？
你没有提到第二个输入的类型..??
尝试使用数据：JSON.stringify(form.serialize());
我现在已将输入类型添加到第二个表单字段。此外，我删除了序列化并添加了一个简单的数据字段 - 仍然无法使用 IE。
你是如何读取服务器上的表单值的？

标签： jquery internet-explorer-11

【解决方案1】：

serialize() 方法不会将表单数据转换为 Json...

这应该可行——IE11 中的输出将是{"ExternalId":"","mandateName":"4343"}：

<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
            <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
        </head>
        <body>
            <form action="/Mandate/Edit" id="mandateForm" method="post">            
                <input id="ExternalId" name="ExternalId" type="hidden" value="" />
                <input id="mandateName" name="mandateName" type="text" />
                <a href="#" id="md-submit">Create</a>
            </form>
            <script type="text/javascript">
                function form_to_json (selector) {
                  var ary = selector.serializeArray();
                  var obj = {};
                  for (var a = 0; a < ary.length; a++) obj[ary[a].name] = ary[a].value;
                  return JSON.stringify(obj);
                }

                $(function () {
                    $("#md-submit").on("click", function (e) {
                        e.preventDefault();
                        var form = $("#mandateForm");
                        var request = $.ajax({
                            type: "POST",
                            url: form.attr("action"),
                            data: form_to_json(form),
                            dataType: 'json',
                            cache: false
                        });
                    });
                });
            </script>
        </body>
    </html>

【讨论】：

问题是我的 IE 似乎无法处理任何参数，无论是字符串化的 json 对象还是纯数据值。
使用 IE 开发者工具 (F12) 找出你的 IE 和其他 IE 的不同之处。在 IE 开发人员工具中，您可以找到网络跟踪选项，该选项允许您查看对服务器发出的 http 请求。

【解决方案2】：

在 ie 中，在 jquery 中的表单序列化似乎存在一些问题。我通常使用这个插件：http://jquery.malsup.com/form/#api

这似乎是解决问题的最简单方法。但它远非最干净的方式。您可以尝试的另一件事是：让服务器监听 json requestdata。并将其序列化为 json 字符串。或者自己制作一个序列化函数。这就像 3 行代码。

【讨论】：

我现在已经删除了序列化并用数据值替换它 - 仍然无法正常工作。

【解决方案3】：

别担心你尝试用 serialization() 方法发送数据我希望你的问题可以解决试试这个。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    </head>
    <body>
        <form action="/Mandate/Edit" id="mandateForm" method="post">            
            <input id="ExternalId" name="ExternalId" type="hidden" value="" />
            <input id="mandateName" name="mandateName" />
            <a href="#" id="md-submit">Create</a>
        </form>
        <script type="text/javascript">
            $(function () {
                $("#md-submit").on("click", function (e) {
                    e.preventDefault();
                    var form = $("#mandateForm");
                    var request = $.ajax({
                        type: "POST",
                        url: form.attr("action"),
                        data: $('form#myForm').serialize(),
                        dataType: 'json',
                        cache: false
                    });
                });
            });
        </script>
    </body>
</html>

【讨论】：

我已将行数据行更改为“数据：$('form#mandateForm').serialize()”，但仍然无法正常工作。正如我之前所说，一个简单的数据参数也没有提交，所以我认为序列化函数不是原因。

【解决方案4】：

我遇到了同样的问题，但我通过将其添加到 head 标签中解决了这个问题

<meta charset="utf-8">

【讨论】：

【解决方案5】：

今天我们在 IE11 中遇到了同样的问题。我发现这对我有用：

$.ajax({
  type: "POST",
  url: "./index.php",
  data: { name: "John", time: "2pm" },					
  cache: false,
  success: function(data){
    $.ajax({
      type: "POST",
      url: "./index.php",
      data: { name: "John", time: "2pm" },							
      cache: false
    });
}});

但这不是：

$.ajax({
  type: "POST",
  url: "./index.php",
  data: { name: "John", time: "2pm" },					
  cache: false,
  success: function(data){
}});

$.ajax({
  type: "POST",
  url: "./index.php",
  data: { name: "John", time: "2pm" },							
  cache: false
});

此时看起来如果您同时执行多个 AJAX 调用，POST 数据将是空的，除了第一次调用。当我一个接一个地执行它们时，它会起作用。

【讨论】：

【解决方案6】：

我发现在 IE11 上激活“增强保护模式”可以解决这个问题。

Internet Options --> Advanced Options --> Enable Enhanced Protected Mode

之后，重启浏览器，发送POST数据。

【讨论】：