ajax03
目录
前言
ajax03学习开始
Ajax练习
// ajax.js // 设置服务器信息 var baseURL='http://127.0.0.1:3000' // 发送POST/PUT请求 function post(obj){ // 1.将传递的对象格式的参数，转为查询字符串格式 var arr = [] // 遍历对象 for(var k in obj.data){ arr.push(k + '=' + obj.data[k]) } var str = arr.join('&') // 2.创建HTTP请求对象 var xhr = new XMLHttpRequest() // 3.打开服务器的连接，请求接口 xhr.open(obj.type,baseURL+obj.url,true) // 4.POST请求设置请求头中编码类型 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=utf-8') // 5.发送请求，将参数放入到请求体 xhr.send(str) // 6.添加事件，监听响应，获取响应结果 xhr.onload = function(){ // 把响应的JSON转为JS对象，然后再传递出去 obj.success( JSON.parse(xhr.responseText) ) } } //发送GET/DELETE function get(obj){ // obj.data 对象，把对象转换成 pno=1&count=5 var arr=[] for(var k in obj.data){ // 把拼接的一组放入数组 arr.push(k + '=' + obj.data[k]) } // 把数组转为字符串，之间用&分隔 var str = arr.join('&') // console.log(str) // 1.创建HTTP请求对象 var xhr = new XMLHttpRequest() // 2.打开服务器的连接，请求接口 xhr.open(obj.type,baseURL+obj.url+'?'+str,true) // 3.发送请求 xhr.send() // 4.添加事件，监听响应 xhr.onload = function(){ // 调用传递的函数,把响应的结果传出去 // 传递结果前，把JSON转为JS对象 obj.success( JSON.parse(xhr.responseText) ) } }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>员工列表</title> <style> table { width: 600px; margin-top: 20px; } table,th,td{ border: 1px solid #999; border-collapse: collapse; } th,td { line-height: 32px; text-align: center; } </style> </head> <body> 当前页码<input type="text" id="pno"><br> 每页数据量<input type="text" id="count"><br> <button id="btn">提交</button> <table> <thead> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>生日</th> <th>工资</th> <th>部门</th> </tr> </thead> <tbody id="list"> <tr> <td>1</td> <td>刘德华</td> <td>男</td> <td>1962-8-2</td> <td>50000</td> <td>30</td> </tr> <tr> <td>1</td> <td>刘德华</td> <td>男</td> <td>1962-8-2</td> <td>50000</td> <td>30</td> </tr> </tbody> </table> <script> // 给按钮绑定点击事件 btn.onclick = function(){ // 获取输入的值 var a = pno.value var b = count.value console.log(a,b) // 1.创建HTTP请求对象 var xhr = new XMLHttpRequest() // 2.打开服务器的连接，请求接口 xhr.open('GET',`http://127.0.0.1:3000/v1/emps/list?pno=${a}&count=${b}`,true) // 3.发送请求 xhr.send() // 4.添加事件，监听响应，获取响应结果 xhr.onload = function(){ // console.log(xhr.responseText) // JSON转为JS对象 var obj = JSON.parse(xhr.responseText) // 获取数组部分 var arr = obj.data console.log(arr) // 遍历数组，获取每条数据 // 声明变量，用于保存拼接的一组数据，初始值为空字符串 for(var i=0,str='';i<arr.length;i++){ // console.log(arr[i]) // 把生日部分的值放入到Date对象，然后获取年月份 var d = new Date(arr[i].birthday) var d1 = `${d.getFullYear()}年${d.getMonth()+1}月${d.getDate()}日` str += ` <tr> <td>${arr[i].eid}</td> <td>${arr[i].ename}</td> <td>${arr[i].sex ? '男' : '女'}</td> <td>${d1}</td> <td>${arr[i].salary}</td> <td>${arr[i].deptid}</td> </tr> ` } // 循环结束后，将拼接的一组渲染到tbody之间 list.innerHTML = str } } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>对象转为查询字符串</title> </head> <body> <script> // 将对象转为查询字符串 a=1&b=2&c=hello var obj = { a: 1, b: 2, c: 'hello' } var arr = [] // 遍历对象属性 for(var k in obj){ // k 属性名 // obj[k] 属性值 // console.log(k + '=' + obj[k]) // 把每组添加到数组 arr.push(k + '=' + obj[k]) } // 将数组转为字符串，之间用&分隔 console.log(arr.join('&')) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ajax封装-get</title> </head> <body> 当前的页面<input type="text" id="pno"><br> 每页数据量<input type="text" id="count"><br> <button id="btn">提交</button> <script> // 封装Ajax请求 function get(obj){ // obj.data 对象，把对象转换成 pno=1&count=5 var arr=[] for(var k in obj.data){ // 把拼接的一组放入数组 arr.push(k + '=' + obj.data[k]) } // 把数组转为字符串，之间用&分隔 var str = arr.join('&') // console.log(str) // 1.创建HTTP请求对象 var xhr = new XMLHttpRequest() // 2.打开服务器的连接，请求接口 xhr.open(obj.type,obj.url+'?'+str,true) // 3.发送请求 xhr.send() // 4.添加事件，监听响应 xhr.onload = function(){ // 调用传递的函数,把响应的结果传出去 // 传递结果前，把JSON转为JS对象 obj.success( JSON.parse(xhr.responseText) ) } } btn.onclick = function(){ var a = pno.value var b = count.value console.log( a,b ) // 请求接口： get({ type: 'GET', //请求方法 url: 'http://127.0.0.1:3000/v1/emps/list', //接口地址 data: { //传递参数，写成对象格式 pno: 1, count: 5 }, success: function(res){ //通过回调函数获取结果 // res 就是获取的结果 console.log(res) } }) } /* // 计算任意两个数字相加的和 function add(a,b,cb){ // return a+b // cb = function(){} // 调用传递进来的函数 cb(a+b) } // 为了获取函数的结果 // 回调函数：把函数作为参数传递 add(2,3,function(r){ console.log('回调函数被自动调用了',r) }) */ // fs.stat('1.txt',(err,r)=>{}) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>封装Ajax请求————POST/PUT</title> </head> <body> 姓名<input type="text" id="ename"><br> 性别<select id="sex"> <option value="1">男</option> <option value="0">女</option> </select><br> 生日<input type="text" id="birthday"><br> 工资<input type="text" id="salary"><br> 部门<select id="deptid"> <option value="10">研发部</option> <option value="20">运营部</option> <option value="30">市场部</option> <option value="40">测试部</option> </select><br> <button id="btn">提交</button> <script src="ajax.js"></script> <script> // 给按钮绑定点击事件 btn.onclick = function(){ var a = ename.value var b = sex.value var c = birthday.value var d = salary.value var e = deptid.value console.log(a,b,c,d,e) // 请求添加员工的接口 post({ type: 'POST', //请求方式 url: '/add', //接口地址 data: { ename: a, sex: b, birthday: c, salary: d, deptid: e }, //接口需要的参数 success: function(res){ //通过回调函数获取结果 console.log(res) } }) } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>请求JSON</title> </head> <body> <script src="ajax.js"></script> <script> // 打开网页后，直接发送Ajax请求 // GET /dept.json get({ type: 'GET', url: '/dept.json', success: function(res){ console.log(res) } }) </script> </body> </html>
总结
Ajax03学习结束
278
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
