jquery关于ajax,关于ajax: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);

}