Ajax中的 form表单与 serialize()函数 和根路径

目录

Ajax中的from表单

表单属性：

表单的用户体验

jQuery的 serialize()函数

Ajax请求方法别名

全局配置请求根路径

---

Ajax中的form表单

表单由三个部分组成：表单标签、表单域、表单按钮。

表单用来采集用户信息，表单中的button标签表示提交按钮的意思，type默认属性为 submit（可以不写）。 表单外的button标签默认表示普通的按钮，

表单属性：
action、method 和 enctype

enctype只能搭配POST提交方式一起使用。只有 method 属性的值等于 POST 时，才有必要设置 enctype 属性。 

表单的用户体验

表单的默认提交行为会导致页面的跳转。用户体验不好，所以我们需要阻止表单的默认跳转，

jQuery的 serialize() 函数

能一次性提取到表单中采集的数据,但是必须为每个表单域添加 name 属性

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

Ajax请求方法别名

1、axios.get()

 //   axios.get(地址)     get请求不带参数
      axios.get('http://www.liulongbin.top:3009/api/get').then((res) => {
        console.log(res);
      })
 
 
 //  axios.get(地址,prams)       get请求带参数
      axios.get('http://www.liulongbin.top:3009/api/get', { params:{name:'毛毛', age:18 }}).then((res) => {
        console.log(res);
      })

 2、axios.post()

//   axios.post(地址)        post请求不带参数
    axios.post('http://www.liulongbin.top:3009/api/post').then((res)=>{
      console.log(res);
    })
 
 //  axios.post(地址,参数值)    post请求带参数
    axios.post('http://www.liulongbin.top:3009/api/post',{name:'rose',age:21}).then((res)=>{
      console.log(res);
    })

全局配置请求根路径

假如端口号从 3009 变成了 3006，则每个接口调用时的端口号都需要被修改！，在 url 地址中，协议://域名:端口 对应的部分叫做“请求根路径”。全局配置请求根路径的好处：提高项目的可维护性。

axios.defaults.baseURL = '请求根路径'
 

// 设置axios全局根路径
    axios.defaults.baseURL='http://www.liulongbin.top:3009'
 
 //  调用接口时，只提供具体的请求路径即可   
    axios.get('/api/get').then((res)=>{
      console.log(res);
    })