AJAX 提交数据使用

1.form表单提交数据的用法：

在网页中,form表单主要负责数据采集功能 例如:采集用户的登录信息 采集用户的详细信息
form表单三部分组成:表单标签 表单域 表单按钮
注意：每个表单域必须包含 name 属性，否则用户填写的信息无法被采集到！
当表单数据填写完毕后，用户点击表单按钮，会触发表单的提交操作，从而把采集到的数据提交给服务器。

1. 标签最重要的 3 个属性

分别是 action、method 和 enctype。简介信息如下表所示：

注意：enctype 属性只能搭配 POST 提交方式一起使用；如果是 GET 提交，则 enctype 没有意义！

2.以 GET 方式提交表单数据

在 标签上，通过 action 属性指定提交的 URL 地址，通过 method 属性指定提交的方式为 GET：

注意：由于 method 属性的默认值就是 GET，因此上述的 method=“GET” 可以被省略！

3.以 POST 方式提交表单数据:

在 标签上，通过 action 属性指定提交的 URL 地址，通过 method 属性指定提交的方式为 POST，并通过 enctype 属性指定数据的编码方式为 application/x-www-form-urlencoded：

注意：由于 enctype 的默认值就是 application/x-www-form-urlencoded，因此上述的 enctype 可以被省略！

4.enctype 三个可选值之间的区别:

只有 method 属性的值等于 POST 时，才有必要设置 enctype 属性。它的属性可选值有三个：

5.表单提交的问题和解决方案

提交表单数据的时候,整个页面会发生跳转，跳转到了 action 属性所指向的 url 地址,用户无法停留在当前的页面，导致体验很差。
产生问题的原因： 表单身兼数职：既负责采集数据，又负责把数据提交到服务器！表单的默认提交行为会导致页面的跳转。

解决方案： 表单只负责采集数据；Ajax 负责将数据提交到服务器。（符合：职能单一的原则）

通过 Ajax 提交表单采集到的数据，可以防止表单默认提交行为导致的页面跳转问题，提高用户的体验。
○ 监听表单的 submit 提交事件
○ 阻止默认提交行为
○ 基于 axios 发起请求
○ 指定请求方式、请求地址
○ 指定请求体数据

document.querySelector('form').onsubmit = function (e) {
   
      e.preventDefault()
  	axios({
   
    	method: 'POST',
    	url: 'http://www.liulongbin.top:3009/api/form',
    	data: {
   
      	username: document.querySeletor('[name="username"]').value,
      	password: document.querySeletor('[name="password"]').value
    }
  }).then(({
    data: res }) => {
   
    console.log(res)
  })
})

6.jQuery 的 serialize() 函数

能够一次性获取到表单中采集具有name属性的的数据，它的语法格式如下：

//$('form').serialize( )
<script>
        // 1.监听表单的提交事件
        $("form").submit(function(e){
   
           //阻止事件的提交行为
           e.preventDefault()
            // jquery中的serialize()收集表单中的具有name属性的值
            // let str = $(this).serialize()
            // console.log(str); //username=jack&password=123456

           //ajax提交数据,form不用提交数据. 好处,页面不会发生跳转
           axios({
   
               method:'post',
               url:'http://www.liulongbin.top:3009/api/form',
            //    data:{
   
            //        username:$('[name="username"]').val(),
            //        password:$('[name="password"]').val()
            //    }
               data:$(this).serialize()
           }).then(({
   data:res})=>{
   
            console.log(res);
           })
        })
    </script>

2.axios 简化写法

为了简化开发者的使用过程，axios 为所有支持的请求方法提供了别名：
axios.get(url[, config])
axios.delete(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

1.axios.get() 的用法

   <script>
        // 设置axios全局根路径
        axios.defaults.baseURL = 'http://www.liulongbin.top:3009'
        // axios.get(地址)  发送请求不带参数
        $("button").eq(0).click(function(){
   
            axios.get('/api/get').then((res)=>{
   
                console.log(res);
            })
        })

        // axios.get(地址,{params:值})  发送请求带参数
        $("button").eq(1).click(function