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

原生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');
          }
 
      })