前端ajax的使用以及接口的使用

最新推荐文章于 2024-07-28 17:31:47 发布

前端交互仔

最新推荐文章于 2024-07-28 17:31:47 发布

阅读量1.6k

点赞数 1

文章标签： ajax

原文链接：https://www.cnblogs.com/7z7chn/

版权

https://www.cnblogs.com/suoning/p/5809106.html

https://www.cnblogs.com/7z7chn/

https://euc.yonyoucloud.com/cas/login?service=https%3A%2F%2Fmock.yonyoucloud.com%2Fapi%2Fuser%2Flogin_by_token

mock
在这里插入图片描述 https://blog.csdn.net/qq_41759198/article/details/89926580

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body id='one'>
		<button type="button" id="btn">查询数据</button>
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
		<script type="text/javascript">
		//点击按钮，发送ajax请求，将数据显示到页面中
			$("#btn").click(function(){
				
			})
		
		
			$.ajax({
				// 确认我是一个什么样的请求
				type:'get',
				//请求的地址
				url:'data.txt',
				//传递给服务器的数据
				data:{},
				//预期返回的数据类型，如果是json格式，在接收到返回值时会自动封装成json对象，但是前提是里面的格式是json格式的字符串，你必须
				//满足json的格式才可以转
				dataType:"json",
				//请求成功的回调函数，请求成功以后就会调用这个函数,然后把返回的结果传递给形参，也就是括号里面的data,也可以叫做其它的名字
				success:function(data){
					console.log(data);
					console.log('haha');
					// var obj=JSON.parse(data);
					// console.log(obj);
					//取到数据以后我们就该想办法把数据展示到页面上
					//创建一个ul
					var ul=$('<ul></ul>');
					console.log(data.id);
					console.log(data.obj.array.length);
					//遍历返回的数组
					for(var i=0;i<data.obj.array.length;i++){
						console.log('haha');
						//得到数组中的每一个元素
						var user=data.obj.array[i].name;
						console.log(user);
						//创建li元素
						var li="<li>"+user+"</li>";
						console.log(li);
						//将li元素放到ul元素中
						ul.append(li);
						// $("body").append(ul);
						console.log(i);
					}
					
					var ulname=document.getElementById('one')
					console.log(ulname);
					//将ul设置到body标签中
					$("body").append(ul);
				}
			});
		</script>
	</body>
</html>

{
	"id": "1",
	"name": "a1",
	"obj": {
		"id": 11,
		"name": "a11",
		"array": [{
			"id": 111,
			"name": "a111"
		}, 
		{
			"id": 112,
			"name": "a112"
		}]
	}
}

在这里插入图片描述

数组里面是4个对象

在这里插入图片描述
post是提交数据所以必须要有服务器进行响应。

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body id='one'>
		<button type="button" id="btn">查询数据</button>
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
		<script type="text/javascript">
		//点击按钮，发送ajax请求，将数据显示到页面中
			$("#btn").click(function(){
				
			})
		
		
			$.ajax({
				// 确认我是一个什么样的请求
				type:'get',
				//请求的地址
				url:'https://devapi.qweather.com/v7/weather/now',
				//传递给服务器的数据
				data:{
					location:"101101100",
					key:"aa7381071db44742bb8fcbdb3daa0bd6"
				},
				//预期返回的数据类型，如果是json格式，在接收到返回值时会自动封装成json对象，但是前提是里面的格式是json格式的字符串，你必须
				//满足json的格式才可以转
				dataType:"json",
				//请求成功的回调函数，请求成功以后就会调用这个函数,然后把返回的结果传递给形参，也就是括号里面的data,也可以叫做其它的名字
				success:function(data){
					console.log(data.now.temp);
					//取到数据以后我们就该想办法把数据展示到页面上
					//创建一个ul
					var ul=$('<ul></ul>');
					// console.log(data.code);
					// console.log(data.location.length);
					//遍历返回的数组
					// for(var i=0;i<data.location.length;i++){
					// 	//得到数组中的每一个元素
					// 	var city=data.location[i].name;
					// 	// console.log(city);
					// 	//创建li元素
					// 	var li="<li>"+city+"</li>";
					// 	console.log(li);
					// 	//将li元素放到ul元素中
					// 	ul.append(li);
					// 	// $("body").append(ul);
					// }
					var li="<li>"+data.now.temp+'度'+"</li>";
					ul.append(li);
					// var ulname=document.getElementById('one')
					// console.log(ulname);
					//将ul设置到body标签中
					$("body").append(ul);
				}
			});
		</script>
	</body>
</html>

<view class="indexContainer">
<image src="https://i0.hdslb.com/bfs/face/44a889c40e21ab250d73c3a25419c44200d471d9.jpg@150w_150h.jpg" class="tp"></image>
<view class="goStudy">
   <text>我要飞的更高</text>
</view>
<text>Hello World</text>
<view>
<text>{{resdata.now.windDir}}</text>
</view>

</view>

// pages/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    resdata:{}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    wx.request({
      url: 'https://devapi.qweather.com/v7/weather/now',
      method: 'GET',//方法分GET和POST，根据需要写
      data:{
        location:"101101100",
				key:"aa7381071db44742bb8fcbdb3daa0bd6"
      },
      header: {//定死的格式，不用改，照敲就好
        'Content-Type': 'application/json'
      },
      success: function (res) {//这里写调用接口成功之后所运行的函数
        console.log(res.data);//调出来的数据在控制台显示，方便查看
        console.log(typeof(res.data));
        
        that.setData({
          resdata: res.data,//res.data就是你调出来的所有数据（当然也可以在这里面自定义想要调用的数据），然后把值赋给resdata，之后对resdata进行处理即可，具体见wxml
        })
      },
      fail: function (res) {//这里写调用接口失败之后所运行的函数
        console.log('.........fail..........');
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

前端交互仔

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
前端ajax的使用以及接口的使用

https://www.cnblogs.com/suoning/p/5809106.htmlhttps://www.cnblogs.com/7z7chn/https://euc.yonyoucloud.com/cas/login?service=https%3A%2F%2Fmock.yonyoucloud.com%2Fapi%2Fuser%2Flogin_by_tokenmock
复制链接

扫一扫