ajax技术需要jquery,Ajax技术在Jquery中的应用

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

}