博学谷学习记录 | 学习总结，用心分享 | 前端学习之Ajax（二）

表单

1 表单是什么

表单是在网页中负责收集数据的一种容器，它由三个部分组成：表单标签、表单域以及表单按钮。

表单标签写作<form></form>，其作用是将页面上指定的区域划定为表单区域；表单域则是提供了采集信息的渠道，常见的表单域有 input 、textarea 、select等；表单按钮是用户提交信息的一种方式，当用户点击按钮后就会触发表单的提交操作，从而把采集到的信息提交给服务器。 

<form class="form-horizontal">
          <div class="form-group">
              <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
              <div class="col-sm-3">
                  <input type="text" class="form-control" placeholder="用户名" name="username" id="username">
              </div>
          </div>

          <div class="form-group">
              <label for="inputEmail3" class="col-sm-2 control-label">密码</label>
              <div class="col-sm-3">
                  <input type="password" class="form-control" placeholder="密码" name="password" id="password">
              </div>
          </div>

          <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <input type="checkbox" name="optionsRadios" id="optionsRadios1" value="option1">
                <span>Remember me</span>
              </div>
          </div>

          <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                  <button type="submit" class="btn btn-default">sign in</button>
              </div>
          </div>
      </form>

2 上传数据 

2.1 数据类型

 

2.2 普通数据提交

常见的普通数据就是 GET 请求里的查询参数 params 以及 POST 请求里的请求体 data 。

2.3 文件上传

利用WebAPI提供的 FormData 来实现对文件的存储，然后利用 Ajax 技术实现文件的上传功能。

FormData本身并不能存储需要上传的问题，而是利用 FormData() 构造函数创建一个对象，然后将文件存储在这个对象里。

利用 FormData() 创建的对象能够使用 append 方法，向对象中添加键值对数据，其中键表示数据项的名字，必须是字符串，而值则表示数据项的值，可以是任意类型。

    <script>

      const fd = new FormData()

      fd.append('username','jack')
      fd.append('age',20)
      fd.append('avatar', 图片文件) //值为文件类型
    </script>

2.4 JSON格式数据上传

1.JSON数据格式

用字符串的方式来表示的对象或数组类型的数据，叫做 JSON 数据，其有两种格式：对象格式 和 数组格式。

2.对象格式的JSON数据

对象格式的 JSON 数据，最外层使用 { } 进行包裹，内部的数据为 key: value 的键值对结构。

① key 必须使用英文的双引号进行包裹（必须使用英文双引号！必须使用英文双引号！必须使用英文双引号！）
② value 的值只能是字符串（必须双引号！必须双引号！必须双引号！）、数字、布尔值、null、数组、对象类型（可选类型只有这 6 种，没有undefined）

    <script>
      const jsonObj = `{
      "name":"jackie",
      "age":18,
      "married":false,
      "hobby":null,
      "work":['程序员','网约车司机'],
      "address":{
        'province':'河北省',
        'city':'石家庄市',
      }
    }`
    </script>

3.数组格式的JSON数据

数组格式的 JSON 数据，最外层使用 [ ] 进行包裹，内部的每一项数据之间使用英文逗号（ , ）分隔，其中每一项的值类型只能是字符串（必须双引号！必须双引号！必须双引号！）、数字、布尔值、null、数组、对象这 6 种类型之一。

    <script>

      const jsonArr = `[
        "前端",
        2023,
        true,
        null,
        ["html", "css"],
        { "name": "zs", "age": 20 }
      ]`

    </script>

3.将 JSON 数据转换为 JS 数据

调用浏览器内置的 JSON.parse() 函数，可以把 JSON 格式的字符串转换为 JS 数据，

    <script>
      const jsonObj = `{
        "name":"jackie",
        "age":18,
        "married":false,
        "hobby":null,
        "work":["程序员","网约车司机"],
        "address":{
          "province":"河北省",
          "city":"石家庄市"
        }
      }`;

      console.log(JSON.parse(jsonObj));

        const jsonArr = `[
          "前端",
          2023,
          true,
          null,
          ["html", "css"],
          { "name": "zs", "age": 20 }
        ]`

      console.log(JSON.parse(jsonArr));

    </script>

4.将 JS 数据转换为 JSON 数据 

调用浏览器内置的 JSON.stringify() 函数，可以把 JS 数据转换为 JSON 格式的字符串，

    <script>

      const jsObj = {
        'name':'小红',
        'age': 18,
        'hobby':['jogging','cooking'],
        'address':{
          'province':'Hebei',
          'city':'shijiazhuang'
        }
      }

      console.log(JSON.stringify(jsObj));

      let jsArr = ['小红',18,'jogging','cooking']

      console.log(JSON.stringify(jsArr));
    </script>

 5.序列化和反序列化

把真实数据转换为字符串的过程，叫做序列化；把字符串转换为真实数据的过程，叫做反序列化。

6.JSON 文件的语法要求
JSON文件语法严格遵守以下的 6 条规则：
① 属性名必须使用双引号包裹
② 字符串类型的值必须使用双引号包裹，不允许使用单引号表示字符串
③ JSON 中不能写注释
④ JSON 的最外层必须是对象或数组格式
⑤ 不能使用 undefined 或函数作为 JSON 的值