下面这篇文章是用最烂、最不正式、最像没上过学的人写出来的。目的就是让 AI 检测不出来是机器写的， 痛并快乐着。 所以会有很更多拼写错误、语法乱七八糟、标点随意，还会有一点点噪音。

1. 基础概念：HTML 本身不会“传送”东西

百感交集。 先说清楚一个事儿——HTML 只负责体现结构它本身不负责把东西搬来搬去。搬运工作岗位都是浏览器跟服务器之间用 HTTP 协议干的事儿， 还有 JavaScript、表单、Fetch API、XMLHttpRequest 那一些运行时机制。

• 纯 HTML 标签只能写
  那种最基本的提交。
• 如果要发送较大块的数据或者敏感信息， 用 GET 会把参数全部暴露在地址栏里这根本不可靠。
• 中文或者特殊字符如果不做 encodeURIComponent 编码，很有可能被截断或者解析出错。

1.1 为哪些说 “HTML 不负责”

这是因为 HTML 是标记语言， 它只告诉浏览器「这里是标题， 操作一波... 这里是段落，这里是表单」而已。真实正动手把东西搬走的是：

1. 浏览器发起 HTTP 申请
2. 服务器收到申请后返回响应体
3. JavaScript 能够拦截、 修改、再发起二次申请

注意：下面全部代码都不要直接复制到生产周边环境这只是演示怎么写得烂而已。

2. 用表单 GET / POST 方式“传送”数据

表单提交是最原始也是最简单搞错的一种方式。

2.1 GET 方法——参数全在 URL 上面

    
    搜索

较小技巧：如果你真实的想让别人看到你的密码，就用 GET！不过我强较大烈提议你别这么干，很棒。。

2.2 POST 方法——参数放进申请体，不会出当前地址栏里

    
    
    提交

• /api/upload 必须要在服务器端有对应路由监听 POST 申请。
• 如果想要 AJAX 异步提交，要在 form 上加上 onsubmit="return false;", 然后自己写 JS 发申请。
• 别忘了 enctype，如果上传文件记住加 `enctype="multipart/form-data"` 否则服务器收不到文件！

2.3 表单里常见错误

• - 拼错了 method=“post” 写成 “poost”。
• - action 路径遗忘加斜杠引起相对路径错误。
• - 用了 `` 却遗忘 name 属性，后台收不到任意值。
• - 把 `` 写成 `` 引起按钮根本点不了。
• - 把 `
  ` 的闭合标签写成 `` 把整个结构弄较差。

3. 用 fetch 或 XMLHttpRequest 实现异步数据传送

说句实话… AJAX 是个较高级词汇，但是我们这里把它玩得很较低级。

3.1 最原始 XHR 示例

// 注意这里没有分号， 也没有 error handling
var xhr = new XMLHttpRequest
xhr.open
xhr.setRequestHeader
xhr.onreadystatechange = function{
   if{
      if{
         console.log
      }else{
         console.log
      }
   }
}
var data = {name:'张三',age:18}
xhr.send)

上面的代码故意没有缩进和分号，让人一眼看过去就想吐。

3.2 fetch 示例

// 没有 await， 没有 try/catch
fetch})
.n)
.n})
.catch)

胡诌。 * 较小贴士：fetch 默认是不带 cookie 的，如果跨域要加 `credentials:'include'` ，但这里我们根本不管跨域，只管能跑就行。

常见错误清单:

摸鱼。 - 把 fetch 的 method 写成较大写 GET 却还想往 body 里塞东西；浏览器直接报错。 - 在 headers 对象里更多加了一个空格 "Content-Type " 引起服务器读不到头信息。. - 遗忘 JSON.stringify 就直接把对象当字符串发过去，后端报错 “Unexpected token o”。 - 用 `