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

Modifying a html element using innerHTML - effect on httprequest

本文关键字：httprequest 影响 元素 innerHTML 修改 html 使用      更新时间：2023-09-26

如果div包含表单字段，那么修改div容器的内部HTML对http请求有效负载有什么影响？

这是第一个.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 的请求字段中看到的值。（网络>标头）

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

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

这是Chrome标头中的值

 **Request Payload**
      name=Batman

参数"后缀"从 http（？） 参数列表中消失了。我已经清楚地使用 innerHTML 将完整的选择元素添加回表单。但由于某种原因，它没有得到认可。

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

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

如果有人知道为什么会发生这种情况，以及我可以做些什么来纠正此问题，而无需添加上述虚拟选项，请分享。谢谢！

我认为这完全与以下事实有关，然后当您重新添加<select>时，您会在没有任何可能选项的情况下添加它，因此 chrome 省略了变量（因为它永远无法设置）。

您的空白<option>再次产生所需结果这一事实证实了这一点。

相关文章：