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

ゞ浴缸里的玫瑰 2022-09-12 11:54 265阅读 0赞

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  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16]![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 1]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"
    		}]
    	}
    }

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
数组里面是4个对象

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

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 5]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 6]

<!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 () {
    
      }
    })

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/3edd6602d3cf4862a2d1210fb59c3871.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAbGl1bGFuZzY4,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/621c308a013b45b8846f92c86752bc2c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/76a5d1b425ea47ec90d02130d0153f60.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/f1890fff58ec4785b8f0d8be740445e3.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220828/a10170446c304eb4b577dca57b90a8b7.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220828/fd002c2788d0487293b25143c06de5aa.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220828/0314f60f395f4d59aa37cfe31f61e878.png