Question

如果div包含表单字段，那么在http请求有效负载上修改div容器的innerHTML会有什么影响？

这是first.html

<html>
<body>
        <script type="text/javascript">

        function changeDropdown(){
            document.getElementById('divId').innerHTML="";
            var options = "<select name='suffix' id='suffix'></select>";
            document.getElementById('divId').innerHTML=options;         

        }
    </script>
    <br><br>
    <p>testing http header issue</p>
    <a href="javascript:changeDropdown()">Change dropdown</a>
    <form name="test" action="second.html" method="post">
        <table align="center">
            <tr>
                <td>
                    <label for="name">Name</label>
                </td>
                <td>
                    <input type="text" name="name"/>
                </td>
            </tr>       
            <tr>
                <td>
                    <label for="suffix">Suffix</label>
                </td>
                <td>
                    <div id="divId">
                        <select name="suffix" id="suffix">
                            <option value="Mr" selected=selected>Mr</option>
                            <option value="Mrs" selected=selected>Mrs</option>
                            <option value="Ms" selected=selected>Ms</option>
                        </select>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit" value="submit"</td>
            </tr>
        </table>
    </form>
</body>

如果我在两个字段中输入一个值，然后点击“提交”，这就是我在chrome的请求字段中看到的值。（网络 - ＆GT;头）

**Request Payload**
      name=Batman&suffix=Mr

现在再次打开first.html。这次点击“更改下拉列表”链接。这将删除所有选项。现在输入一个名称，然后单击“提交”。

这是Chrome标题中的值

 **Request Payload**
      name=Batman

参数“suffix”从http（？）参数列表中消失。我已经使用innerHTML清楚地将完整的select元素添加回表单。但由于某种原因，它没有得到承认。

有趣的是，如果我在select字段中添加一个空选项，它就会被拾取。即将javascript函数更改为

 document.getElementById('divId').innerHTML="";
 var options = "<select name='suffix' id='suffix'><option value=''></option></select>";
 document.getElementById('divId').innerHTML=options;

如果有人知道为什么会发生这种情况，我该如何解决这个问题而不必像上面那样添加虚拟选项，请分享。谢谢！

Answer 1

我认为这完全与事实相关，然后当您重新添加<select>时添加它而没有任何可能的选项，因此chrome会省略该变量（因为它永远不会被设置）。 / p>

这可以通过空白<option>再次产生所需结果来证实。

使用innerHTML修改html元素 - 对httprequest的影响

1 个答案: