标签:charset data class type 因此 servlet 代码 函数 的区别
Ajax本身属于js内核中的一部分,jQuery是js的一个框架,是对js的封装,因此jQuery中也维护着Ajax的内容。
页面发起请求,会将请求发送给浏览器内核中的Ajax引擎,Ajax引擎会提交请求到服务器端,在这段时间里,客户端可以进行任意操作,知道服务器端将数据返回给Ajax引擎后,会触发你设置的事件,从而执行自定义的js逻辑代码完成某种页面功能。
jQuery是一个优秀的js框架,自然对js原生的ajax进行了封装,封装后的Ajax操作方法更简单,功能更强大,与Ajax操作相关的jQuery方法很多种,但开发中常用的有三种:
$(function(){
alert();
});
post提交不用担心中文乱码,因为方法已经帮我们解决了。
$.ajax({option1:value1,option2:value2});
常用的option如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery-ajax</title>
<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
function fn1(){
// get异步访问
$.get(
"/web-ajax/ajaxServlet2",// 访问的url地址
{"name":"张三","age":18},// json格式的请求参数
// 执行成功的回调函数
function(data){
alert(data.age);
},
// 返回数据的格式,也就是data的格式
"json"
);
}
function fn2(){
// post异步访问
$.post(
"/web-ajax/ajaxServlet2",// 访问的url地址
{"name":"张三","age":18},// json格式的请求参数
// 执行成功的回调函数
function(data){
alert(data.name);
},
// 返回数据的格式,也就是data的格式
"json"
);
}
function fn3(){
// ajax异步访问
$.ajax({
// 访问的url
url:"/web-ajax/ajaxServlet2",
// json格式的请求参数
data:{"name":"张三","age":18},
// 请求方式
type:"POST",
// 请求成功的回调函数
success:function(data){
alert(data.name);
},
// 请求失败的回调函数
error:function(){
alert("请求失败");
},
// 预期服务器返回的数据类型
dataType:"json",
// 是否异步,默认为true
async:true
});
}
</script>
</head>
<body>
<input type="button" value="Ajax的get访问" onclick="fn1()"><br>
<input type="button" value="Ajax的post访问" onclick="fn2()"><br>
<input type="button" value="Ajax的ajax访问" onclick="fn3()"><br>
</body>
</html>
标签:charset data class type 因此 servlet 代码 函数 的区别
原文地址:https://www.cnblogs.com/zxfei/p/11565174.html