jQuery中的罕用的ajax函数
ajax(…)
get(…)
post(…)
getJSON(…)
jQuery中罕用的Ajax函数利用案例
首先在客户端,新构建一个页面,在
中引入jquery-min.js文件Jquery Ajax function
$.get(..)
$.post(..)
$.ajax(..)
$.load(..)
1.get函数利用
客户端
function doGet(){
1.申请url
let url ="/jquery/doAjaxGet";
2.申请参数
let params="msg= hello everyone jiayouya"
3发送异步申请
$.get(url,params,(rusult)=>{
$("#resultId").html(result);
});
}
服务端
@Controller
@RequestMapping("/jquery")
public class JQueryController {
@RequestMapping("/doAjaxGet")
@ResponseBody
public String doAjaxGet(String msg) {
//将客户端传到服务端的字符串转换为大写,而后以字符串的模式响应给客户端
return "Jquery get request result" + msg.toUpperCase();
}
}
2.post函数利用
客户端
function doPost(){
1.申请url
let url ="/jquery/doAjaxPost";
2.申请参数
let params="title=AAA&&id=10"
3发送异步申请
$.post(url,params,(rusult)=>{
$("#resultId").html(result);
});
}
服务端
@RequestMapping("/doAjaxPost")
@ResponseBody
public String doAjaxGet(String title,Integer id) {
return "Jquery get request result" +title+"/"+id ;
}
3.ajax函数利用
客户端
function ajax(){
//1 申请url
let url ="/jquery/doAjaxPost";
//2申请参数
let params="id=10&&title=AAA&&age=23";
//3发送异步申请
$.ajax({
url:url,
data:params,
dataType:"json",
async:true,
success:(result)=>{
$("#resultId").html(result);
},
error:function(xhr){
console.log(xhr.statusText);
$("#resultId").html(xhr.statusText)
}
})
}
4 load函数利用
客户端
function doLoad(){
//1 申请url
let url ="/jquery/doAjaxGet";
//2申请参数
let params="msg= hello cgb teacher ";
//3发送异步
$("#resultId").load(url,params);
}