jQuery 中的罕用的 ajax 函数
ajax(…)
get(…)
post(…)
getJSON(…)
jQuery 中罕用的 Ajax 函数利用案例
首先在客户端，新构建一个页面，在 <body> 中引入 jquery-min.js 文件
<fieldset>
<legend>Jquery Ajax function</legend>
<button onclick="doGet()">$.get(..)</button>
<button onclick="doPost()">$.post(..)</button>
<button onclick="doAjax()">$.ajax(..)</button>
<button onclick="doLoad()">$.load(..)</button>
<span id="resultId"></span>
</fieldset>
<script type="text/javascript" src="/js/jquery.min.js"></script>
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);
}