这是我参与「第五届青训营」伴学笔记创作活动的第 9 天

form表单

form标签的属性

action 属性用来规定当提交表单时，向何处发送表单数据

应该是后端提供的一个URL地址，负责接收表单提交的数据

form表单未指定action属性值的情况下，默认为当前页面的URL值
表单提交后，页面会立即跳转到action属性的URL地址

target 属性用来规定在何处打开action跳转的URL地址

_blank 新窗口打开
_self 默认，在相同的框架中打开
_parent 在父框架集中打开
_top 在整个窗口打开
framename 在指定的框架中打开

method 属性用来规定用何种方式把表单数据提交到action属性指定的URL地址

可选值有两个：get（默认情况）和post
两种方式区别：get会在url中暴露数据，post不会再url中暴露数据，会以formData形式提交数据

enctype 属性规定发送表单数据之前如何对数据进行编码

可选值三个，application/x-www-form-urlencoded（默认值）发送前编码所有字符
multipart/form-data 不对字符编码（在使用包含文件上传控件的表单时，必须使用该值）
text/plain 空格转换为“+”加号，但不对特殊字符编码（很少用）

表单的同步提交

通过点击submit按钮触发表单提交的操作，使页面跳转到actionURL行为。缺点如下：

同步提交后，整个页面会跳转到action URL所指向的地址
同步提交后，页面之前的状态和数据会丢失

解决方法：表单只负责采集数据，Ajax负责将数据提交到服务器

通过Ajax提交表单数据

监听表单提交事件

1、第一种方式（对于后来动态创建的表单，也可以监听到）
        $("#f1").submit(function () {
          alert("监听到了表单提交事件");
        });

2、第二种方式
        $("#f1").on("submit", function () {
          alert("监听到了表单提交事件2");
        });

阻止表单默认提交行为

        $("#f1").submit(function (event) {
          event.preventDefault();
          alert("监听到了表单提交事件");
        });

        $("#f1").on("submit", function (event) {
          event.preventDefault();
          alert("监听到了表单提交事件2");
        });

快速获取表单中的数据serialize()，可以一次性获取表单的所有数据

（但必须为每个元素s设置name属性，如果没有name属性，没法获取该标签的数据）

    <form action="/login" id="f1">
      <input type="text" name="user_name" />
      <input type="password" name="password" />
      <button type="submit">提交</button>
    </form>

        $("#f1").on("submit", function (event) {
          event.preventDefault();
          alert("监听到了表单提交事件2");
          console.log($(this).serialize());
//user_name=piyanling&password=12345
        });

XMLHttpRequest（xhr）

概述

xhr是浏览器提供的JavaScript对象，可以请求服务器上的数据资源

（jQuery中的ajax就是基于xhr对象封装出来的）

xhr对象的readyState属性：用来表示当前Ajax请求所处的状态

UNSET（0）：xhr对象已被创建，但未调用open方法
OPENED（1）：open方法已被调用
HEADERS_RECEIVED（2）：send方法已被调用，响应头也已经被接收
LOADING（3）：数据接受中，此时response属性已经包含部分数据
DONE（4）：Ajax请求完成，数据已经彻底完成或失败

查询字符串：在url末尾加上用于向服务器发送信息的字符串（多个参数可以用&分隔）

无论是 $.get$ .ajax 还是xhr实现ajax都是通过查询字符串的方式实现的

URL编码：在URL地址中，只允许出现英文相关的字母、标点符号、数字（不允许出现中文字符）

如果需要中文字符，必须编码

使用xhr发起GET请求（原生js）

创建xhr对象
调用xhr.open（）函数：创建请求，指定请求方式和URL地址

可接受三个参数，第三个参数（可选）：表示该请求是否异步的布尔值

调用xhr.send（）函数：发起请求
监听xhr.onreadystatechange事件：监听xhr对象的请求状态readystate和服务器响应状态status

onreadystatechange事件处理程序不会收到event对象
xhr.abort（）可以取消异步请求

xhr.responseText返回的数据中有一个status和xhr.status完全不一样

      // 1、创建xhr对象
      var xhr = new XMLHttpRequest();
      // 2、调用open函数   创建请求
      xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks");
      // 3、调用send函数   发起请求
      xhr.send();
      // 4、监听onreadystatechange事件
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          //数据获取成功
          console.log(xhr.responseText);
        // xhr.responseText返回的数据中有一个status和xhr.status完全不一样
        }
      };


不带参数
 // 2、调用open函数   创建请求
      xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks");

带参数
 // 2、调用open函数   创建请求
      xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks?id=2246&bookname=金瓶梅");

带参数与否，主要在第二步创建请求中，如果带参数，只需在url中指定参数

使用xhr发起POST请求（原生js）

创建xhr对象
调用xhr.open（）函数：创建请求，指定请求方式和URL地址
设置Content-Type属性：提交数据时必须指定的属性，如何对数据编码
调用xhr.send（）函数：发起请求，同时指定要发送的数据
监听xhr.onreadystatechange事件：监听xhr对象的请求状态readystate和服务器响应状态status

      //   1、创建xhr对象
      var xhr = new XMLHttpRequest();
      // 2、调用open函数 创建请求
      xhr.open("POST", "http://www.liulongbin.top:3006/api/addbook");
      // 3、设置conten-type属性  在发送之前对url所有字符编码
      //  给该请求增加额外的请求头部
      xhr.setRequestHeader(
        "Content-Type",
        "application/x-www-form-urlencoded"
      );
      // 4、调用send函数   发起请求
      xhr.send("bookname=童话故事&author=1&publisher=2");
      // 5、监听事件
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(xhr.responseText);
        }
      };

数据交换格式

就是服务器端与客户端之间进行数据传输和交换的格式（XML和JSON）

XML（extenxible markup language）可扩展标记语言

HTML是描述网页内容的载体；XML用来传输和存储数据，是数据的载体；两者毫无关系
缺点：格式臃肿，传输效率低，js解析xml比较麻烦

JSON（javascript object notation）

form表单

form标签的属性

action 属性用来规定当提交表单时，向何处发送表单数据

应该是后端提供的一个URL地址，负责接收表单提交的数据

form表单未指定action属性值的情况下，默认为当前页面的URL值
表单提交后，页面会立即跳转到action属性的URL地址

target 属性用来规定在何处打开action跳转的URL地址

_blank 新窗口打开
_self 默认，在相同的框架中打开
_parent 在父框架集中打开
_top 在整个窗口打开
framename 在指定的框架中打开

method 属性用来规定用何种方式把表单数据提交到action属性指定的URL地址

可选值有两个：get（默认情况）和post
两种方式区别：get会在url中暴露数据，post不会再url中暴露数据，会以formData形式提交数据

enctype 属性规定发送表单数据之前如何对数据进行编码

可选值三个，application/x-www-form-urlencoded（默认值）发送前编码所有字符
multipart/form-data 不对字符编码（在使用包含文件上传控件的表单时，必须使用该值）
text/plain 空格转换为“+”加号，但不对特殊字符编码（很少用）

表单的同步提交

通过点击submit按钮触发表单提交的操作，使页面跳转到actionURL行为。缺点如下：

同步提交后，整个页面会跳转到action URL所指向的地址
同步提交后，页面之前的状态和数据会丢失

解决方法：表单只负责采集数据，Ajax负责将数据提交到服务器

通过Ajax提交表单数据

监听表单提交事件

1、第一种方式（对于后来动态创建的表单，也可以监听到）
        $("#f1").submit(function () {
          alert("监听到了表单提交事件");
        });

2、第二种方式
        $("#f1").on("submit", function () {
          alert("监听到了表单提交事件2");
        });

阻止表单默认提交行为

        $("#f1").submit(function (event) {
          event.preventDefault();
          alert("监听到了表单提交事件");
        });

        $("#f1").on("submit", function (event) {
          event.preventDefault();
          alert("监听到了表单提交事件2");
        });

快速获取表单中的数据serialize()，可以一次性获取表单的所有数据

（但必须为每个元素s设置name属性，如果没有name属性，没法获取该标签的数据）

    <form action="/login" id="f1">
      <input type="text" name="user_name" />
      <input type="password" name="password" />
      <button type="submit">提交</button>
    </form>

        $("#f1").on("submit", function (event) {
          event.preventDefault();
          alert("监听到了表单提交事件2");
          console.log($(this).serialize());
//user_name=piyanling&password=12345
        });

XMLHttpRequest（xhr）

概述

xhr是浏览器提供的JavaScript对象，可以请求服务器上的数据资源

（jQuery中的ajax就是基于xhr对象封装出来的）

xhr对象的readyState属性：用来表示当前Ajax请求所处的状态

UNSET（0）：xhr对象已被创建，但未调用open方法
OPENED（1）：open方法已被调用
HEADERS_RECEIVED（2）：send方法已被调用，响应头也已经被接收
LOADING（3）：数据接受中，此时response属性已经包含部分数据
DONE（4）：Ajax请求完成，数据已经彻底完成或失败

查询字符串：在url末尾加上用于向服务器发送信息的字符串（多个参数可以用&分隔）

无论是 $.get$ .ajax 还是xhr实现ajax都是通过查询字符串的方式实现的

URL编码：在URL地址中，只允许出现英文相关的字母、标点符号、数字（不允许出现中文字符）

如果需要中文字符，必须编码

使用xhr发起GET请求（原生js）

创建xhr对象
调用xhr.open（）函数：创建请求，指定请求方式和URL地址

可接受三个参数，第三个参数（可选）：表示该请求是否异步的布尔值

调用xhr.send（）函数：发起请求
监听xhr.onreadystatechange事件：监听xhr对象的请求状态readystate和服务器响应状态status

onreadystatechange事件处理程序不会收到event对象
xhr.abort（）可以取消异步请求

xhr.responseText返回的数据中有一个status和xhr.status完全不一样

      // 1、创建xhr对象
      var xhr = new XMLHttpRequest();
      // 2、调用open函数   创建请求
      xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks");
      // 3、调用send函数   发起请求
      xhr.send();
      // 4、监听onreadystatechange事件
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          //数据获取成功
          console.log(xhr.responseText);
        // xhr.responseText返回的数据中有一个status和xhr.status完全不一样
        }
      };


不带参数
 // 2、调用open函数   创建请求
      xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks");

带参数
 // 2、调用open函数   创建请求
      xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks?id=2246&bookname=金瓶梅");

带参数与否，主要在第二步创建请求中，如果带参数，只需在url中指定参数

使用xhr发起POST请求（原生js）

创建xhr对象
调用xhr.open（）函数：创建请求，指定请求方式和URL地址
设置Content-Type属性：提交数据时必须指定的属性，如何对数据编码
调用xhr.send（）函数：发起请求，同时指定要发送的数据
监听xhr.onreadystatechange事件：监听xhr对象的请求状态readystate和服务器响应状态status

      //   1、创建xhr对象
      var xhr = new XMLHttpRequest();
      // 2、调用open函数 创建请求
      xhr.open("POST", "http://www.liulongbin.top:3006/api/addbook");
      // 3、设置conten-type属性  在发送之前对url所有字符编码
      //  给该请求增加额外的请求头部
      xhr.setRequestHeader(
        "Content-Type",
        "application/x-www-form-urlencoded"
      );
      // 4、调用send函数   发起请求
      xhr.send("bookname=童话故事&author=1&publisher=2");
      // 5、监听事件
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(xhr.responseText);
        }
      };

数据交换格式

就是服务器端与客户端之间进行数据传输和交换的格式（XML和JSON）

XML（extenxible markup language）可扩展标记语言

HTML是描述网页内容的载体；XML用来传输和存储数据，是数据的载体；两者毫无关系
缺点：格式臃肿，传输效率低，js解析xml比较麻烦

JSON（javascript object notation）

网络请求资源2 | 青训营笔记

form表单

form标签的属性

表单的同步提交

通过Ajax提交表单数据

XMLHttpRequest（xhr）

概述

使用xhr发起GET请求（原生js）

使用xhr发起POST请求（原生js）

数据交换格式

form表单

form标签的属性

表单的同步提交

通过Ajax提交表单数据

XMLHttpRequest（xhr）

概述

使用xhr发起GET请求（原生js）

使用xhr发起POST请求（原生js）

数据交换格式