美文网首页
form表单，post与get

form表单，post与get

作者: zooeydotmango | 来源:发表于2019-08-07 15:53 被阅读0次

form表单

可以把浏览者输入的数据传送到服务器端
语法：<form action="服务器文件" method="传送方式">

常见的input标签

  • submit
  • text
  • password
  • checkbox
  • radio
  • select下拉选择，与option一起使用
  • file上传文件
  • botton
  • reset重置表单
  • date,datetime,datetime-local,color等HTML5新增

提交表单

方式一

通过form元素的submit()方法提交，例如，响应一个<button>的click事件
但是这种方式扰乱了form的正常提交。浏览器默认<button type="submit">时提交表单，或者用户在最后一个input按回车键

<!-- HTML -->
<form id="test-form">
    <input type="text" name="test">
    <button type="button" onclick="doSubmitForm()">Submit</button>
</form>

<script>
function doSubmitForm() {
    var form = document.getElementById('test-form');
    // 可以在此修改form的input...
    // 提交form:
    form.submit();
}
</script>
方式二

form本身的onsubmit事件，在提交form时作修改

<!-- HTML -->
<form id="test-form" onsubmit="return checkForm()">
    <input type="text" name="test">
    <button type="submit">Submit</button>
</form>

<script>
function checkForm() {
    var form = document.getElementById('test-form');
    // 可以在此修改form的input...
    // 继续下一步:
    return true;
}
</script>

return true就是告诉浏览器继续提交，如果是false，浏览器不会继续提交form，这种情况会提示错误后终止提交form

input中name属性的作用：

  • 将name相同的分为一组，对提交的表单数据进行标识，比如radio分组就是将name相同的分为一组
  • 用于提交form数据时，对数据的引用：比如一个input用get发送数据时，url中会看到?name=xxx
  • 可以用于css中设置该类name元素的样式
  • 可以在js中通过name获取元素对象

input中placeholder的作用

HTML5中新属性，能够让你在文本框里显示提示信息，一旦开始输入信息，提示信息就会隐藏，CSS中可以使用::placeholder美化

浏览器中的post 与 get

本质上的区别是语义的区别
GET的语义是获取指定的资源。GET：读取一个资源，因此反复读取不会对访问的数据有副作用（可以理解为不会修改数据库），我们称为“幂等”。
因为GET是读取，就可以对GET请求的数据做缓存，这个缓存可以在浏览器、代理、服务器
POST让服务器做一件事，这件事往往是有副作用的（会修改数据库），不幂等的。比如，通过POST下单，服务器创建了新的订单，然后返回订单成功的界面。
因为不幂等，所以不能多次执行，所以不能缓存。因为POST可能会有副作用，因此浏览器一般不能将其保存为书签。并且如果尝试刷新POST请求，浏览器也会提示这个操作可能会有副作用。

get和post携带的数据也有区别，当浏览器发出一个get请求时，不是用户自己在浏览器地址栏输入，就是点击了页面中某个url，其实并不是get只能用url，而是浏览器直接发出的get只能由一个url触发，所以get上要带一些参数就只能依靠url上附带querysetring，hettp本身其实没有这个限制

而post请求都来自form提交，每次提交，form的数据被浏览器用编码到HTTP请求的body里。浏览器发送的post请求的body主要有两种格式：
1.application/x-www-form-urlencoded用来传输简单的数据，大概就是key1=value1&key2=value2这种格式
2.multipart/form-data格式，采用这种格式是因为第一种的编码方式对文件这种二进制数据非常低效

因此我们一般泛泛的说：GET请求没有body，只有url，请求数据在querystring中；POST请求的数据在body中。但这种情况只限于浏览器发送请求的场景，另外还有在Ajax api中使用这两个接口，暂时不讨论。

相关文章