通過Axios實現前后端數據交互

本文轉載自查看原文 2020-08-06 10:07 1258 前后端數據交互

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;

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 前后端數據交互(五)——什么是 axios？實現前后端數據交互的方法 Flask 框架：運用Axios庫實現前后端交互前后端數據交互(六)——ajax 、fetch 和 axios 優缺點及比較使用ajax實現前后端是數據交互 #uniapp實現前后端數據交互（登錄案例）數據交互 axios VUE+Axios+Nodejs+express+pgsql實現前后數據交互 nodejs實現前后端交互 vue---axios實現數據交互與跨域問題