通過Axios實現前後端資料互動
阿新 • • 發佈：2020-08-06
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;