通过Axios实现前后端数据交互
1.前段Html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="/js/jquery.js" ></script> <script type="text/javascript" src="/js/axios.min.js" ></script> </head> <body> <div> <h2>axios post提交数据</h2> <input type="text" name="name" id="name" /> <input type="text" name="age" id="age" /> <button onclick="saveHanderPost()" >提交</button> </div> <hr> <div> <h2>axios gett提交数据</h2> <input type="text" name="name" id="ename" /> <input type="text" name="age" id="eage" /> <button onclick="saveHanderGet()" >提交</button> <div> <h2>提交成功之后服务端返回的数据</h2> <div> <h2>post服务端返回数据</h2> <div id="sname"></div> <div id="sage"></div> </div> <div> <h2>Get服务端返回数据</h2> <div id="gname"></div> <div id="gage"></div> </div> </div> <div> <h2>从服务器端获取数据</h2> <button onclick="saveHanderServerDatePost()" >POST向服务端端请求数据</button> <hr> <button onclick="saveHanderServerDateGet()" >Get向服务端端请求数据</button> <div id="din"> </div> </div> </div> </body> <script> function saveHanderPost(){ let name = $("#name").val(); let age = $("#age").val(); axios.post(\'http://localhost:8008/axios/post.html\', { name: name, age: age }) .then(function (response) { console.log(response); console.log(response.data.age); console.log(response.data.name); //$("#sname").innerHTML=response.data.name; //$("#sage").innerHTML=response.data.age; document.getElementById("sname").innerHTML=response.data.name; document.getElementById("sage").innerHTML=response.data.age; let data=response.data; let txt = "<p>编号:"+data.id+"</p><p>年龄:"+data.realName+"</p><p>真名:"+data.name+"</p><p><img src=\'"+data.HeadUrl+"\' /></p>"; $("#din").append((txt)); }) .catch(function (error) { console.log(error); }); }; function saveHanderGet(){ let name = $("#ename").val(); let age = $("#eage").val(); axios.get(\'http://localhost:8008/axios/get.html\', { params:{ name: name, age: age } }).then(function (response) { console.log(response.data.age); console.log(response.data.name); document.getElementById("gname").innerHTML=response.data.name; document.getElementById("gage").innerHTML=response.data.age; let data=response.data; let txt = "<p>编号:"+data.id+"</p><p>年龄:"+data.realName+"</p><p>真名:"+data.name+"</p><p><img src=\'"+data.HeadUrl+"\' /></p>"; $("#din").append((txt)); }) .catch(function (error) { console.log(error); }); }; function saveHanderServerDateGet(){ let name = $("#ename").val(); let age = $("#eage").val(); axios.get(\'http://localhost:8008/axios/serverget.html\', { params:{ name: name, age: age } }).then(function (response) { console.log(response.data.age); console.log(response.data.name); console.log(response.data.language); console.log(response.data.live); let lang=response.data.language; let live=response.data.live; console.log(lang) console.log(live) //此处需要遍历通过js向HTML元素里面填写数据 // document.getElementById("gname").innerHTML=response.data.name; //document.getElementById("gage").innerHTML=response.data.age; let data=response.data; let txt = "<p>编号:"+data.id+"</p><p>年龄:"+data.realName+"</p><p>真名:"+data.name+"</p><p><img src=\'"+data.HeadUrl+"\' /></p>"; $("#din").append((txt)); }) .catch(function (error) { console.log(error); }); }; function saveHanderServerDatePost(){ let name = $("#name").val(); let age = $("#age").val(); axios.post(\'http://localhost:8008/axios/serverpost.html\', { name: name, age: age }) .then(function (response) { console.log(response); console.log(response.data.age); console.log(response.data.name); console.log(response.data.language); console.log(response.data.live); //$("#sname").innerHTML=response.data.name; //$("#sage").innerHTML=response.data.age; //document.getElementById("sname").innerHTML=response.data.name; //document.getElementById("sage").innerHTML=response.data.age; let data=response.data; var txt = "<p>编号:"+data.id+"</p><p>年龄:"+data.realName+"</p><p>真名:"+data.name+"</p><p><img src=\'"+data.HeadUrl+"\' /></p>"; $("#din").append((txt)); }) .catch(function (error) { console.log(error); }); }; </script> </html>
2.服务端demo
const router = require(\'koa-router\')(); //客户端post提交数据 router.post(\'/post.html\', async (ctx) => { ctx.set("Content-Type", "application/json"); let postParam = ctx.request.body; let name=postParam.name; let age=postParam.age; console.log(name); console.log(age); let boby={ id:12, name:name, age:age, realName:\'dyt\', HeadUrl:\'https://www.google.cn/landing/cnexp/google-search.png\', live:[\'游泳\',\'旅游\',\'写作\',\'song\'], language:{ python:100, java:98, nodejs:90 } } ctx.body=JSON.stringify(boby); }); //客户端向服务端请求数据post router.post(\'/serverpost.html\', async (ctx) => { ctx.set("Content-Type", "application/json"); let postParam = ctx.request.body; let name=postParam.name; let age=postParam.age; console.log(name); console.log(age); let boby={ id:12, name:name, age:age, realName:\'dyt\', HeadUrl:\'https://www.google.cn/landing/cnexp/google-search.png\', live:[\'游泳\',\'旅游\',\'写作\',\'song\'], language:{ python:100, java:98, nodejs:90 } } ctx.body=JSON.stringify(boby); }); router.get(\'/form.html\', async (ctx) => { await ctx.render(\'form\', { //users:user }) }); //客户端向服务端提交数据GET router.get(\'/get.html\', async (ctx, next) => { ctx.set("Content-Type", "application/json"); let names=ctx.query; console.log(names) let name=ctx.query.name; let age=ctx.query.age; console.log(name); console.log(age); let boby={ id:12, name:name, age:age, realName:\'dyt\', HeadUrl:\'https://www.google.cn/landing/cnexp/google-search.png\', live:[\'游泳\',\'旅游\',\'写作\',\'song\'], language:{ python:100, java:98, nodejs:90 } } ctx.body=JSON.stringify(boby); }); //客户端向服务端请求数据GET router.get(\'/serverget.html\', async (ctx, next) => { ctx.set("Content-Type", "application/json"); let names=ctx.query; console.log(names) let name=ctx.query.name; let age=ctx.query.age; console.log(name); console.log(age); let boby={ id:12, name:name, age:age, realName:\'dyt\', HeadUrl:\'https://www.google.cn/landing/cnexp/google-search.png\', live:[\'游泳\',\'旅游\',\'写作\',\'song\'], language:{ python:100, java:98, nodejs:90 } } ctx.body=JSON.stringify(boby); }); router.get(\'/foo\', async (ctx) => { let items=[{title:"西游记"},{title:"水浒传"}]; await ctx.render( "foo",{ title:\'电影首页\', items:items } ) }); router.get(\'/news\', (ctx) => { ctx.body =\'新闻管理\'; }); module.exports = router;
版权声明：本文为span-phoenix原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。