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>
预览: