表单提交

一些面试题

  1. CSS选择符有哪些？哪些属性可以继承？
  2. CSS优先级算法如何计算？
  3. 常见的浏览器内核有哪些？

目录

  1. HTTP 基础
    1. request header
    2. message body
  2. form 提交
  3. $.ajax 接口
    1. $.get
    2. $.post

HTTP 基础

请求（request）与响应（response）

Server

Client

请求 request

响应 response

HTTP 基础

请求（request）

  • 请求行
  • 请求头
  • 空行
  • 消息体
GET / HTTP/1.1
Host: www.baidu.com
Accept: text/html
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.73 Safari/537.36
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6,zh-TW;q=0.4
Cookie: BAIDUID=5A056AFFCD3D7072D17933F3750CAB0B:FG=1;
POST /login/email HTTP/1.1
Host: www.zhihu.com
Accept: */*
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Content-Length: 119
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_2) AppleWebKit/601.3.9 (KHTML, like Gecko) Version/9.0.2 Safari/601.3.9
Cookie: _xsrf=e0f0996099f0c4e3e0157d92d65dfe23;

password=zhihu&captcha=mrah&remember_me=true&email=huayiqishi%40qq.com

GET V.S. POST

HTTP 语义

GET 用于获取资源（读）

POST 用于更新资源（写）

  1. 在地址栏输入 url
  2. <img src=...> <script src=...>
  3. 请求外部 CSS 文件
  4. $.get()
  5. ……
  1. <form> 提交
  2. $.post()

GET 与 POST 的区别

浏览器的触发方式不同（见右）

GET 无 body，POST 有 body

 

 

根本区别：语义

重复提交 POST 浏览器会提示

搭建服务器

响应 GET 和 POST 请求

使用 koa 搭建（请先忽略 server 搭建原理）

只需要知道

router
    .get('/', indexCtrl.index)
    .post('/', indexCtrl.post)

表示

GET   请求 / 路径时，服务器调用 indexCtrl.index 

POST 请求 / 路径时，服务器调用 indexCtrl.post 

表单提交

<form action="" method="">

  • action 表示提交到哪个地方
  • method 表示提交的 HTTP 动词（GET、POST）
  • target 表示用哪个 window 接收响应
  • input 要加 name
  • 提交按钮要加 type=submit
  • label 的用法

细节

$.post 提交

jQuery.post( url, data, success, dataType)

AJAX 的实质

GET

function ajaxPost() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      console.log( xhttp.responseText)
    }
  };
  xhttp.open("POST", "/", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send("name=Henry&phone=123");
}
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("demo").innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
  xhttp.send();
}

POST

完。

Made with Slides.com