4 修改一条记录
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>04 获取个人信息</title> </head> <style> p { text-align: center; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-weight: 800; width: 100%; height: 20px; background-color: rgb(255, 0, 89); color: rgb(255, 255, 255); } button { width: 300px; height: 40px; line-height: 40px; font-size: 20px; border-radius: 12px; color: azure; background-color: black; box-shadow: 1px 2px 3px rgb(255, 25, 0); } input { color: rgb(0, 0, 0); font-size: 20px; background-color: rgb(255, 255, 255); box-shadow: 1px 2px 3px rgb(255, 25, 0); border-radius: 12px; } </style> <body> <script src="../js/axios.min.js"></script> <p>修改一个人的信息</p> <button id="btn4">点我更新一个人的基本数据信息</button><br> <br> <input type="text" placeholder="请输入要修改的id编号" id="person_update_id"> <input type="text" placeholder="请输入要修改的姓名" id="person_update_name"> <br> <br> <input type="text" placeholder="请输入要修改的性别" id="person_update_sex"> <input type="text" placeholder="请输入要修改的爱好" id="person_update_subject"> <br> <br> <script> // 修改数据 const btn4 = document.getElementById('btn4') const personUpdateId = document.getElementById('person_update_id') const personUpdateName = document.getElementById('person_update_name') const personUpdateSex = document.getElementById('person_update_sex') const personUpdateSubject = document.getElementById('person_update_subject') // 修改id btn4.onclick = () => { // 修改数据 http://localhost:3000/teachers axios({ url: "http://localhost:3000/teachers", method: 'PUT', data: { id: personUpdateId.value, name: personUpdateName.value, sex: personUpdateSex.value, subject: personUpdateSubject.value } }).then( response => { console.log("请求成功", response.data) }, error => { console.log("请求失败", error) } ) } </script> </body> </html>
5 删除一条记录
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>04 获取个人信息</title> </head> <style> p { text-align: center; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-weight: 800; width: 100%; height: 20px; background-color: rgb(255, 0, 89); color: rgb(255, 255, 255); } button { width: 300px; height: 40px; line-height: 40px; font-size: 20px; border-radius: 12px; color: azure; background-color: black; box-shadow: 1px 2px 3px rgb(255, 25, 0); } input { color: rgb(0, 0, 0); font-size: 20px; background-color: rgb(255, 255, 255); box-shadow: 1px 2px 3px rgb(255, 25, 0); border-radius: 12px; } </style> <body> <script src="../js/axios.min.js"></script> <p>删除一个人的信息</p> <button id="btn5">点我删除一个人的信息</button> <input type="text" id="person_delete_id" placeholder="请输入删除id的编号"> <script type="text/javascript"> btn5.onclick = () => { axios({ url: `http://localhost:3000/teachers/${personDeleteId.value}`, method: 'DELETE', }).then( response => { console.log("请求成功", response.data) }, error => { console.log("请求失败", error) } ) } </script> </body> </html>
6 axios中常用到的配置项
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>06_axios中常用到的配置项</title> </head> <body> <script src="../js/axios.min.js"></script> <link rel="stylesheet" href="../css/index.css"> <button id="btn">点击我获取所有的人员信息</button> <script> // 给axios配置默认属性 axios.defaults.timeout=2000 axios.defaults.responseType="json" const btn = document.querySelector("#btn") // console.log(btn) btn.onclick = () => { //请求的地址 axios({ url: "http://localhost:3000/students", // 请求参数 method: 'GET', // params:({a:2,b:8}), // 配置请求体参数 json // data:{c:6,d:9}, //配置请求体参数 url编码 // data:'e=68&f=90', // 配置时间 timeout: 2000, headers:{school:'schoole'}, //默认的值 responseType:'json' }).then( response => { console.log("请求成功", response.data) }, error => { console.log("请求失败", error) } ) } </script> </body> </html>
AJAX技术对比学习博客连接如下
2022年5月12号:Ajax第一课:_星辰镜的博客-CSDN博客
