vue Ajax调用json、php文件

最新推荐文章于 2023-01-26 01:58:44 发布

清风无虑skr

最新推荐文章于 2023-01-26 01:58:44 发布

阅读量902

点赞数

分类专栏： vue 文章标签： ajax 前端 vue.js javascript

本文链接：https://blog.csdn.net/weixin_43889532/article/details/106882641

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Ajax(axios)

Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。
Github开源地址： https://github.com/axios/axios
安装方法

可以直接使用script标签调用

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
或
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

可以使用安装npm：

$ npm install axios

使用Ajax调用json文件：
首先需要建立一个json文件，我是在同一文件夹建立的所以直接使用了，要是再其他文件夹建立的话一定要注意调用的路径。
注意：json文件不能出现注释的情况和不能直接将几个json文件放在同一个json文件中，这样都是调用不成功的（由于之前也没接触过json文件所以不太知道，找了半天才发现是json文件出的问题）
json文件

{ 
    "sites": [
		{"name":"baby","age":27,"address":"china weifang"},
		{"name":"黄晓明","age":30,"address":"china yantai"},
		{"name":"鹿晗","age":22,"address":"china qingdao"}
    ]
}

通过get方法请求json文件：
案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
  <div
    v-for="site in info"
  >
    {{ site.name }}&nbsp;&nbsp;
    {{ site.age }}&nbsp;&nbsp;
    {{ site.address }}
  </div>
</div>
<script type = "text/javascript">
new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('lizi.json')
      .then(response => (this.info = response.data.sites,
	  console.log(response.data)
	  )) 
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
  }
})
</script>
</body>
</html>

提示：如果在使用调用其他文件时，我习惯将调用的内容在控制台输出，这样便能知道是否调用成功且更加有利于找出问题所在。

下面是我写的一个案例，通过Ajax调用json，选择国内的城市，json文件包括国内全部城市信息。

json文件：
由于文件较大，博客没法全部展示（放上来浏览器都卡死了😂😂😂😂）,自己去提吧,全国的城市信息api

链接：https://pan.baidu.com/s/1Bt9krCNE2qHMtjl51rWgXw
提取码：m2cv

小案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
			<p>
				<select name="国家"  style="height:30px" value="请选择">
					 <option v-for="site in info">{{site.AddName}}</option>
				</select>	
			</p>
		</div>
		<script type = "text/javascript">
		new Vue({
		  el: '#app',
		  data () {
		    return {
		      info: null
		    }
		  },
		  mounted () {
		    axios
		      .get('chinacity.json')
		      .then(response => (this.info = response.data.sites,
			  console.log(response.data)
			  )) 
		      .catch(function (error) { 
		        console.log(error);
		      });
		  }
		})
		</script>
	</body>
</html>

在说下get方法传参的方法:

// 直接在 URL 上添加参数 ID=12345
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
 
// 也可以通过 params 设置参数：
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

以上便是通过Ajax(axios)来传后台数据的。
我这里只是给大家写了两个案例,还有许多内容没写,主要剩下的基本都是一些文字叙述,想了解更多axios的话可以去菜鸟教程看下。

Ajax(vue-resource)

Vue 要实现异步加载需要使用到 vue-resource 库。

可以直接通过script标签来调用：

<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

不写那么多废话了，直接上案例吧😀😀😀

通过get方法请求txt文件：
txt文本：

我们总以为,是生活欠我们一个“满意”,其实是我们欠生活一个“努力”。
<br>
在你面前说不用太努力的人，都在你背后默默的拼命呢

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<div id="box">
	<input type="button" @click="get()" value="获取数据(Get)">
</div>
<script type = "text/javascript">
window.onload = function(){
var vm = new Vue({
    el:'#box',
    data:{
        msg:'Hello World!',
    },
    methods:{
        get:function(){
            //发送get请求
            this.$http.get('ajax.txt').then(function(res){
                document.write(res.body);    
            },function(){
                console.log('请求失败处理');
            });
        }
    }
});
}
</script>
</body>
</html>

下面这个案例是通过get方法请求php文件，且将获取的图片链接显示在页面上和将想要调用的信息显示在页面上

这个php文件是我在开源社区找的当日的新闻api，然后为了练习建立php文件，将内容重新写入了新建的文件内
php文件：
这里php文件由于是新闻类的，所以直接编写上来可能太好，所以请在下方链接自取吧

链接：https://pan.baidu.com/s/1iIxFSQYiP-9N53zVqGS12Q
提取码：gp1f

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>post提交请求</title>
    <script src="vue.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    
</head>
<body>
<div id="box">
    <input type="button" @click="get" value="点我异步获取数据(Get)">
	{{info}}
	<img :src="info" alt="" width="300px">
</div>
<script type = "text/javascript">

window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
	info:''
},
methods:{
get:function(){
//发送get请求
this.$http.get('http://meiriyikan.cn/api/json.php').then(function(res){
// document.write(res.body.news[0].news_content); 

this.info=res.body.img_url;
// document.write(this.info); 
// document.write(res.body.news[0].news_img); 
// document.write(res.body.news[0].news_time); 
// document.write(res.body.news[0].news_title); 
// document.write(res.body.news[0].news_url); 
console.log(this.info)//查看api数据结构
console.log(res)//查看api数据结构
},function(){
console.log('请求失败处理');
});
}
}
});
}
</script>
</body>
</html>

注意：要想将获取到的图片信息显示在页面上，其实很简单只需要在img标签的scr属性前面加上“：”便可以了，然后将调用的图片链接信息写在scr属性内便可以了，不太理解的可以看下上面案例。

总结： 到这里vue的基础学习已经差不多了，下面便开始试着写一些小案例了，对于Ajax这部分刚开始接触可能会感觉有点迷，当时因为我对json、php等文件格式都不是太清楚，所以都是建立好文件直接找点内容放进去了，但这样非常容易出现问题，于是我便去找了许多api接口直接去调用，当然上面案例都是我新建的文件为的就是想让大家可以更好的理解，这几天我会先对一些常用的api接口进行下汇总，有兴趣的可以去看下。😁😁😁个人感觉这部分挺有意思的。

清风无虑skr

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue Ajax调用json、php文件

Ajax(axios)Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。Github开源地址： https://github.com/axios/axios安装方法可以直接使用script标签调用<script src="https://unpkg.com/axios/dist/axios.min.js"></script>或<script src="https://cdn.staticfile.org/axios
复制链接

扫一扫