Ajax-请求方法-数据提交

请求方法-数据提交#

常用请求方法

请求方法：对服务器资源，要执行的操作

常用请求方法

请求方法	操作
GET	获取数据
POST	提交数据
PUT	修改数据（全部）
DELETE	删除数据
PATCH	修改数据（部分）

数据提交#

场景：当数据需要在服务器上 保存

axios请求配置#

url：请求的URL网址

method ：请求的方法，若为 GET 可省略（不区分大小写）

data ：提交数据

axios({
    url:'目标资源地址',
    method:'请求方法',
    data:{
        参数名:值,
    }
}).then(result=>{
    // 对服务器返回数据做后续处理
})

数据提交-注册账号#

需求：通过axios提交用户名和密码，完成注册功能

注册用户URL地址：http://hmajax.itheima.net/api/register

请求方法：POST

参数：

• username：用户名（中英文和数字组成，至少8位）
• password：密码（至少6位）

用户注册

用户名 密码

注册账号

// 注册账号
document.querySelector('.regsubmit').addEventListener('click', function() {
    let username = document.querySelector('#username').value
    let password = document.querySelector('#password').value
    axios({
        url: 'http://hmajax.itheima.net/api/register',
        method: 'POST',
        data: {
            // username: 'andy1234',
            // password: '123456'
            username,
            password
        }
    }).then(res => {
        console.log(res);
    })
})

axios错误处理#

场景：再次注册相同的账号，会遇到报错信息

处理：用更直观的方式，给 普通用户 展示错误信息，比如弹框

语法：在 then 方法的后面，通过点语法调用 catch 方法，传入 回调函数 并定义形参

axios({
    // 请求选项
}).then(res=>{
    // 处理数据
}).catch(error=>{
    // 处理错误
})

处理：注册案例，重复注册时通过弹框提示用户错误原因

catch得到的错误信息存在于response>data>message中

({...
}).catch(err => {
    // 处理错误信息
    console.log(err);
    let errmsg = err.response.data.message
    console.log(errmsg);
    alert(errmsg)
})