原生js、Jquery、Vue、微信小程序请求数据

约定不等于承诺〃 2023-06-27 12:43 6阅读 0赞

#### 原生js请求后台数据 ####

> 原生js请求后台数据，可以用get，post请求，区别在于，get请求参数在url中，post请求传的参数在request body中，用send发送  
> 注意：async异步（默认为true）

//get请求
    function  ajaxget(url) {
    	var xml = new XMLHttpRequest();
    	xml.open("get",url,true)；
    	xml.onreadystatechange = function() {
    	if(xml.readyState == 4) {
    		if(xml.status == 200) {
    			var response = JSON.parse(xml.responseText);
    			console.log("返回的数据");
    			console.log(response);
    			}
    		}
    	}
    	xml.send(null);
    }
    var titleurl = "这里写请求地址"
    ajaxget(titleurl);
    
    
    //post请求(arr为前端需要存储在后端的数据)
    function ajaxpost (url,arr) {
    	var xml = new XMLHttpRequest();
    	xml.open("post",url,true);
    	//post请求需要设置请求头
    	xml.setRequestHeader("Content-Type","application/json;charset=utf-8");
    	//将页面的内容传送给后台（需要转换成json字符串的形式）
    	xml.send(JSON.stringify(arr));
    	//服务端返回给前端的数据
    	if(xml.readyState == 4) {
    		if(xml.status == 200) {
    			var response = JSON.parse(xml.responseText);
    			console.log("返回的数据");
    			console.log(response);
    			}
    		}
    }
    var titleurl = "这里写请求地址"
    ajaxpost(titleurl,arr);

#### Jquery请求后台数据 ####

> 常见的表单数据提交数据的编码类型content-type  
> application/x-www-form-urlencoded  
> application/json  
> multipart/form-data  
> text/xml

$(function() {
    $.ajax({
    	url:" ",
    	type:"post",
    	data: {//传递参数},
    	dataType:"json",
    	contentType:"application/x-www-form-urlencoded",
    	async:true,
    	timeout:5000,
    	success:function(res) {//res表示是否与服务器连接成功
    		console.log(res);//json中的数据
    		if(res.status == "ok") {//当状态为ok时，显示json中的数据
    			console.log(res.data[0].name)
    		}else {
    			alert("没有相关数据")
    		}
    	}，
    	error:function(e) {
    		//抛出异常
    	}
    })
    })

> 参数解释  
> type：String类型，请求方式，一般为get或者post请求，http的其他请求当然也可以  
> timeout：Number类型 超时时间，单位为毫秒  
> async：Boolean类型，是否异步，默认为true，所有请求为异步  
> cache：Boolean类型，是否从浏览器缓存中加载信息，默认为true  
> data：Object或者String类型，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式  
> dataType：string类型，希望服务器返回的数据类型，如果不是，就转化为指定的数据类型，如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递

##### 注意这里需要强调一下ajax（）之cache属性的作用 #####

> 这个属性只能为true或false，默值: true，当dataType为script和jsonp时默认为false。设置为false的作用就是第一次请求完毕之后，如果再次去请求，可以不从缓存里面读取而是再到服务器端读取，保证数据修改的时效性

#### Vue请求后端数据 ####

Vue使用axios请求后端数据  
步骤：

*  先npm install axios
 *  再npm install --save axios vue-axios,安装完成后，可以在package.json中看到安装好的版本“axios”：“^0.18.0” vue-axios”:“ ^2.1.3”
 *  在main.js中引入

import axios from 'axios'
    import VueAxios from 'vue-axios'
    
    Vue.use(VueAxios,axios)

*  安装后就开始使用axios请求数据了

mounted() {
    	this.axios.post("yourUrl").then(res => {
    		console.log("res.data");
    	}
    }

#### 微信小程序请求后台数据 ####

wx.request({
              url: 'https://localhost:8443/xiaochengxu/addBill.do',
              data: e.detail.value,
              method: 'POST',
              //post请求有请求头，get请求就没有
              header: {'content-type': 'application/x-www-form-urlencoded'},
              success:function(res) {
                  console.log('submit success');    
        		  console.log(res.data)
              },
              fail:function(res){
                  console.log('submit fail');
              },
              complete:function(res){
                  console.log('submit complete');
              }
     
          })