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