将换行符（即 \r\n）附加到 post 请求中发送的表单字段

Posted 2023-04-18

【中文标题】将换行符（即 \\r\\n）附加到 post 请求中发送的表单字段

【英文标题】：Appending newlines characters (i.e. \r\n) to a form field sent in a post request将换行符（即 \r\n）附加到 post 请求中发送的表单字段

【发布时间】：2016-10-25 21:10:09

【问题描述】：

我正在编写一些 Web 表单来测试学生编写的服务器作为练习。正如课堂作业所预期的那样，一些服务器并不能完全按照规范工作。将 Windows 换行符（即 \r\n）附加到浏览器生成的 POST 请求会很有用，因为某些服务器正在执行 ReadLine 而不是使用 Content-Length: 标头计数。

我正在考虑生成以下请求（来自 IE）：

POST /Brian HTTP/1.1
Accept: text/html, application/xhtml+xml, */*
Accept-Language: en-GB
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; rv:11.0) like Gecko
Content-Type: application/x-www-form-urlencoded
Accept-Encoding: gzip, deflate
Host: localhost:43
Content-Length: 8
DNT: 1
Connection: Keep-Alive
Cache-Control: no-cache

location

但在末尾附加一个\r\n。到目前为止，我的尝试是：

<form> 
Username: <input type="text" name="url" id="url4"
    onChange="document.getElementById('update4').setAttribute('action', 
    'http://localhost:43/' + document.getElementById('url4').value);"> </input> 
</form>
<form id="update4" method="post" action="http://localhost:43/">
Location: <input type="text" name="isindex" id="location5" 
 onChange="document.getElementById('location5').value = 
             document.getElementById('location5').value + '\\\r\\\n'"> </input>
<input id="mysubmit3" type="submit" value="go" ></input>
</form>

我知道向事物添加换行符可能很棘手，因此我正在寻求指导。我不希望将换行符编码为 POST 的一部分。我只想在POST 命令之后发送一个原始的\r\n 以刷新帖子。

【问题讨论】：

你为什么要在你的字符串 concat 中转义 \ ？ + '\r\n' 不应该工作吗？

不相信<input> 元素有textarea type？ d 应为小写 document.getElementByID('location5')

@JDHooper 我在另一个 SO 答案（我现在找不到）中看到某些浏览器会剥离 `` 并且需要额外的转义；但无论哪种方式都失败了！

@guest271314 谢谢。那些是我错过的错别字。修复它们并不能使其正常运行

您好先生，我想知道您是否可以接受投票最多的答案。这将有助于那些偶然发现这篇文章并正在寻找答案以对答案更有信心的人。谢谢：D

【参考方案1】：

文本输入元素只允许单行文本。根据W3C Working Draft for text input：

input type=text – 文本输入字段

类型 = "文本" 指定其输入元素是输入元素的value 的单行纯文本编辑控件。

...

值 = string without line breaks 指定此输入元素的值。值：任何不包含换行符（U+000A、“LF”）或回车符（U+000D、“CR”）的字符串。

¹

并且根据the MDN documentation for <input> where 属性 type = 'text':

文本：单行文本字段。换行符会自动从输入值中删除。²

所以给文本输入元素的值添加换行符基本上是多余的。

替代解决方案可能包括：

添加隐藏文本区域并将文本区域的值设置为包含带有换行符的文本字段的值，但可能很难防止学生取消隐藏文本区域并更改值。请参阅this phpfiddle 中的演示。

使用FormData 存储表单的值，添加换行符，然后使用具有该更改值的表单数据提交表单。这只能通过异步提交表单来实现（例如，使用 AJAX，发送到 iframe、其他窗口等不同的目标）。

可以通过 javascript 使用几种不同的技术添加新行，包括：

换行符：\n:

console.log("Bob\nis\ncool");

template literals（参考this answer）

console.log(`Bob 
is 
cool.`);

String.fromCharCode()

console.log('line 1'+String.fromCharCode(10, 13)+'line 2')

---

¹_{https://www.w3.org/TR/2012/WD-html-markup-20120315/input.text.html#input.text}

²_{https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input}

【参考方案2】：

您是否尝试过使用实际的textarea 而不是输入textarea？

getElementByID 也不正确（D 没有大写），我修正了您的转义。

代替：

<input type="textarea" name="isindex" id="location5" 
 onChange="document.getElementByID('location5').value = 
             document.getElementById('location5').value + '\\\r\\\n'"> </input>

试试这个

<form> 
 Username: <input type="text" name="url" id="url4"
    onChange="document.getElementById('update4').setAttribute('action', 
    'http://localhost:43/' + document.getElementById('url4').value);"> </input> 
</form>
<form id="update4" method="post" action="http://localhost:43/">
Location: <textarea name="isindex" id="location5" 
 onChange="document.getElementById('location5').value = 
             document.getElementById('location5').value + '\r\n'"> </textarea>
<input id="mysubmit3" type="submit" value="go" ></input>
</form>

【讨论】：

关闭，但不完全。我得到：isindex=location%0D%0A%0D%0A%0D%0A

您使用的是input text 还是实际的textarea？我不知道input text 允许换行，但实际的textarea 标签可以。

我使用的是input text。我知道textarea 允许换行，但它会将它们编码为帖子的一部分。我希望它们未编码；一个真正的\r 而不是%0D 和一个真正的\n 而不是%0A。这是为了克服我正在测试的服务器的不良实施；因此我必须打破 HTTP 规范...

您是否尝试过像使用 php 这样的服务器端帖子？

我的意思是你有没有试过运行一个发送帖子而不是发送客户端的脚本。