jQuery和vue中插件axios 去访问node接口

1.1.1.1 jquery访问node接口数据

显示 返回值(HTML 或 XML，取决于返回值)。

<button id="btn">点击获取接口数据</button>
    <ul id="jsonData">
        <li></li>
    </ul>

 <script src="./js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
 <script>
  $(function(){
  
  $('#btn').click(function(){
  var apiurl='http://localhost:4000/list'
  $.get(apiurl,function(data){
  console.log(data);
  var strHtml='';
  //遍历
  $.each(data,function(i,item){
  strHtml +=`<li>${item.name} $emsp; ${item.addtime}</li>`
  })
  $('#jsonData').html(strHtml)
  })
  })
  })
 </script>

预览：

使用jquery中的$.ajax() 发送请求，访问nodejs接口数据，代码如下所示：

<button id="btn">点击获取接口数据</button>
<table border="1" align="center" id="jsonData">
<thead>
<tr>
<th>商品编号</th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
</tr>
</thead>
<tbody>

</tbody>
</table>
<script src="./js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script>
$(function(){
$('#btn').click(function(){
var apiurl='

$.get(apiurl,function(data){
console.log(data.data);
var strHtml='';
let list=data.data;
$.each(list,function(i,item){
strHtml +=`
<tr>
<td>${item.id}</td>
<td>${item.name}</td>
<td>${item.price}</td>
<td>${item.num}</td>
</tr>
`
})
$('#jsonData tbody').html(strHtml)
}) 
 

})

})

</script>

预览：

1.1.1.2 vue中插件axios访问node接口数据

  <div id="app">
        <button @click="send">点击发送请求</button>
        <h1 v-show="msg !='' ">获取远程的数据是{
   
   {msg}}</h1>
    </div>

  <script src="./js/vue.js"></script>
    <script src="./js/axios.js"></script>

<script>
        var vm=new Vue({

            //模板选择器
            el:'#app',
            //数据中心
            data:{
                msg:''
            },
            //方法中心
            methods:{
               
                send(){
                    //http://localhost:4000/adata
                    var apiUrl='http://localhost:4000/adata';
                    axios.get(apiUrl).then((result)=>{
                        console.log(result.data);
                        this.msg=result.data
                    })

                }
            }
        })
    </script>

预览：