js------Jquery/axios发送ajax请求

Ajax 技术在Jquery中应用

ajax 函数应用:

function doAjax(){
let url="http://localhost/doAjaxGet";
let params="";
$.ajax({
type:"GET",
url:url,
data:params,
async:true,
success:function(result){
console.log(result);
}
});
}

post 函数应用:

post(url[,params][,callback][,dataType])
	
	function doAjaxPost(){
	let url="http://localhost/doAjaxPost";
	let params="id=101&name=Computer&remark=Computer...";
	
	$.post(url,params,function(result){
	$("#result").html(JSON.stringify(result));//jquery中对上面的代码的简化
	});
	}
	//$.ajax({
	//type:"POST",//省略type,默认就是get请求
	//url:url,
	//data:params,
	contentType:"application/x-www-form-urlencoded",指定客户端向服务端传递的数据类型
	//success:function(result){//result为服务端响应的结果
	//console.log(result);//ajax函数内部将服务端返回的json串转换为了js对象
	//}//success函数会在服务端响应状态status==200,readyState==4的时候执行.
	//});
	

get 函数应用:

get(url[,params][,callback][,dataType])
	
	function doAjaxGet(){
	let url="http://localhost/doAjaxGet";
	let params="";
	$.get(url,params,function(result){
	console.log(result);
	$("#result").html(result);
	},"text")
	}
	//$.ajax({//默认为get请求
	//url:url,
	//data:params,
	//dataType:"text",
	//success:function(result){
	//console.log(result);
	//$("#result").html(result);
	//}
	//})
	

load 函数应用:

$("#result").load(url,params,function(){...})

例1：

function doAjaxLoad(){
		let url="http://localhost/doAjaxGet";
		//load函数就是将url指定的资源异步加载到指定位置(例如result位置)
		//$("#result").load(url);//底层是get请求
		$("#result").load(url,function(){
		console.log("loadfinish");//load异步加载结束执行此回调函数
		});//底层是get请求
		}

例2：

function doLoad(){
			//1.定义请求的url
			varurl="doAjaxGet";
			//2.定义请求的参数
			varparams="msg=hellojqueryajaxrequest";
			//3.发送异步Get请求
			//在指定位置异步加载url对象的资源,
			//在当前应用中表示把url对象的资源呈现到#result位置.
			//$("#result").load(url,params,function(){//回调函数,资源加载完成执行此函数
			//console.log("loadcomplete");
			//});
			$("#result").load(url);//假如不向服务端传值,不需要处理load完以后的结果,还可以这样写
			}
			

分析总结：

	1）$代表jquery对象；
	2）ajax({})这是jquery对象中的一个ajax函数(封装了ajax操作的基本步骤)；
	3）result为服务端响应的结果；
	4）ajax函数内部将服务端返回的json串转换为了js对象；
	5）success函数会在服务端响应状态status==200,readyState==4的时候执行.；
	6）contentType:"application/x-www-form-urlencoded",指定客户端向服务端传递的数据类型；
	7）dataType:"text",这里的text表示服务端响应到客户端的数据类型,假如是json,客户端会将其转换为json格式的js对象；
	8）JSON.stringify(result)可以将js对象转换为josn格式的字符串，这样才能显示到浏览器页面
	9）load函数就是将url指定的资源异步加载到指定位置(例如result位置)

文档就绪事件

实现文档就绪后执行 jQuery 方法：

$(document).ready(function(){ // 开始写 jQuery 代码... });

简洁写法（与以上写法效果相同）:

$(function(){ // 开始写 jQuery 代码... });

---

axios发送ajax请求

（axios中文网|axios API 中文文档 | axios：http://www.axios-js.com/）

注意：对象作为参数时，会以json格式传输，服务器端接受参数的格式也要是json格式：@requestbody

post请求

function doAxiosPost(){
//axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded';

axios.post('/doAjaxPost',{
id:'998',
name:'computer',
remark:'computer...'
})
.then(function(response){

console.log(response.data);
})
.catch(function(error){
console.log(error);
});
}

get请求

function doAxiosGet(){

axios.get('/doAjaxGet')
.then(function(response){
console.log(response.data);
})
.catch(function(error){
console.log(error);
});

/*//上面的请求也可以这样做
axios.get('/user',{
params:{
ID:12345
}
})
.then(function(response){
console.log(response);
})
.catch(function(error){
console.log(error);
});*/
}