form表单&axios-get和post的传递方式form表单&axios-get和post的传递方式 Ajax提交表

Ajax提交表单数据的用法
1. 在实际开发项目中通过axios提交表单数据

form 表单

表单的三个组成部分分别是：表单标签，表单域，表单按钮

在网页中，表单主要负责数据采集功能

1651063543424

1651063556817

网页中采集数据的表单由三个部分组成，分别是：表单标签、表单域、表单按钮。

1651063637583

HTML 的就是表单标签，它是一个“容器”，用来将页面上指定的区域划定为表单区域：

1651063698553

表单域提供了采集用户信息的渠道，常见的表单域有：input、textarea、select 等。

1651063735948

当表单数据填写完毕后，用户点击表单按钮，会触发表单的提交操作，从而把采集到的数据提交给服务器。

1651063762247

注意表单必须包含name属性否则用户填写的信息无法被采集到。

旧方式提交数据form标签的方式提交

肯定会出现刷新页面调整页面的情况（体验很不好）
输入框没name属性没有把数据提交到后端

新的方式 ajax

异步网络请求（异步同时执行多个事情一边使用网页功能而且数据提交同时进行（整个网页））
规范只要学到input标签想要数据提交习惯的加上name属性

如果使用ajax的技术来提交数据是完全不用给标签添加name属性
习惯下来 form input标签name 都一直在使用

jQuery 的 serialize() 函数

jQuery 的 serialize() 函数能够一次性获取到表单中采集的数据，它的语法格式如下：

$('表单元素的选择器').serialize();

示例代码如下：

1651412660540

serialize() 函数的使用注意点：

在使用 serialize() 函数快速获取表单数据时，必须为每个表单域添加 name 属性！

例如下面的示例中，只能通过 serialize() 函数获取到密码的值：

1651412709821

serialize() 函数的其他特点

该方法是jQuery封装的，使用时必须引入jQuery
使用serialize()，各表单域必须有 name 属性
使用该方法得到的结果是一个查询字符串结构：name=value&name=value
该方法能够获取隐藏域的值
该方法不能得到禁用状态的值
该方法不能得到文件域中的文件信息，所以不能完成文件上传

**序列化**

把对象或者数组转成字符串格式过程序列化 JSON.stringify( );

把字符串格式转成对象或者数组反序列化 JSON.parse( );

  <body>
    <form>
      <input type="text" name="username" />
      <input type="text" name="password" />
      <input type="text" />
      <button type="button">获取表单数据</button>
      <!--type="button"阻止默认刷新行为 -->
    </form>
    <script src="./jq/jquery.js"></script>
    <script>
      const button = document.querySelector("button");
      button.addEventListener("click", function () {
        //使用jq的方法 获取表单的数据（字符串）

        //username=NIEandyou&password=65555  get 请求  两种传递参数的方式
        //  1 params 对象
        // 2 在url上拼接字符串的形式  http:/api?username=NIEandyou&password=65555
        const data = $("form").serialize();
        console.log(data);
      });
    </script>
  </body>

1651413607340

自己实现快速获取表单数据（无需引入jq）

<body>
    <form>
      <input type="text" name="username" />
      <input type="text" name="password" />
      <input type="text">
      <button type="button">获取表单数据</button>
      <!--type="button"阻止默认刷新行为 -->
    </form>
    <script>
      const button = document.querySelector("button");
      button.addEventListener("click", function () {
      //1.快速把form表单中带有name属性的数据 设置到form中
       const form = new FormData(document.querySelector('form'));
      //2.创建把数据 转成get 参数格式  对象
       const usp = new URLSearchParams();
      //3.对form遍历
       form.forEach((value,key)=>usp.append(key,value));
      //4.usp 获取到了所有等待转化的数据   开始进行转化
       const data = usp.toString();
       console.log(data);
      });
    </script>
  </body>

FormData 是js内置的对象处理表单数据需要被new出来使用

吧form表单里面所有的标签-name属性转成formdata对象

const form = new FormData(document.querySelector('form'));

form 对象包含所有的表单数据（input name）

1651414428740

自己封装

    <script>
    function getForm(query){
        const form = new FormData(document.querySelector(query));
        const usp = new URLSearchParams();
        form.forEach((value,key)=>{
            ups.append(key,value);
        });
        const data = usp.toString();
        return data;
    }
    </script>

axio执行post请求传递参数格式

axios执行post请求传递参数 data 传参

data可以接受的参数类型

1.对象类型

data:{

// bookname:'从入门到精通',

// author:'自己',

// pulisher:'春风出版社',

2.字符串格式类型

data:'bookname=从入门到精通&author=自己&publisher=春风出版社'

<body>
    <button>加载数据</button>
    <script src="./lib/axios.js"></script>
    <script>
      const button = document.querySelector("button");
      button.addEventListener("click", function () {
        axios({
          method: "post",
          url: "http//www.itcbc.com:3006/api/addbook",
          data: "bookname=从入门到精通&author=自己&publisher=春风出版社",
          // data:{
          //     bookname:'从入门到精通',
          //     author:'自己',
          //     pulisher:'春风出版社',
          // },
        }).then((result) => {
          console.log(result);
        });
      });
    </script>
  </body>

利用usp URLSearchParams 快速转成字符串

 <body>
    <button>加载数据</button>
    <script src="./lib/axios.js"></script>
    <script>
      const data = {
        bookname: "从入门到精通",
        author: "我自己",
        piblisher: "春风出版社",
      };

      //利用usp URLSearchParams  快速转成 字符串
      const usp = new URLSearchParams(data);
      console.log(usp.toString());
    </script>
  </body>

get请求传参的两种方式

url上直接拼接 http://api?a=1&b=2
params {a:1,b:2}

简写的两种方式
- axios.get(url)
- axios.get(url,{params:{a:1,b:2}})

post请求方式一种

a=1&b=2&c=3 ------ {a:1,b=2,c=3}

简写的两种方式

axios.post(url,参数)
- 参数对象个
- 参数字符串 a=1&b=2
在实际开发中，常用的 5 种请求方式分别是： GET、POST、PUT、PATCH、DELETE

为了简化开发者的使用过程，axios 为所有支持的请求方法提供了别名：

axios.get(url[, config])
axios.delete(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

体验 axios.get() 的用法

使用 axios.get() 可以方便快捷地发起 GET 请求：

体验 axios.post() 的用法

使用 axios.post() 可以方便快捷地发起 POST 请求：

form表单&axios-get和post的传递方式