通过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;
