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);
});*/
}