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

 

posted @ 2020-08-06 10:07  maxweber  阅读(1981)  评论(0)    收藏  举报