我们可以通过jQuery来实现接收和发送Ajax请求,并且十分的方便
1) $(selector).load(url,[data],[callback]):载入远程的Html文档到已知的DOM中
i. url :请求的地址
ii. data:可选,发送至服务器的 key/value 数据
iii. callback:可选,回调函数
默认使用 GET 方式,传递附加参数时自动转换为 POST 方式
传递参数有两种方法:
1) 通过传统的传参方法name=””&age=10,注意发送的请求的是GET请求
2) 通过JSON的方法进行传递参数{“name”:””,”age”:100}注意发送的请求时POST请求,(推荐使用该种方法进行传递参数)
load能够载入远程 HTML 文件代码并插入至 DOM 中
匹配的元素应该只有一个
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
$("#toLoadHtml").click(function(){
$("#loadContent").load("test.html");
});
$("#toLoadService").click(function(){
/*$("#loadService").load("index.jsp","name=oracle&age=100",function(){
alert("加载完毕");
});*/
$("#loadService").load("index.jsp",{"name":"oracle","age":50},function(){
alert("加载完毕");
});
});
});
</script>
</head>
<body>
<input type="button" value="加载HTML" id="toLoadHtml">
<input type="button" value="加载JSP" id="toLoadService">
<div id="loadContent"></div>
<div id="loadService"></div>
</body>
2)$.get(url,[data],[callback]):发送get请求,进行异步更新,通过在callback中进行页面元素的更新,注意与load方法不同在与:不要实现确定具体的元素,而是有jQuery直接发送,在function进行动态的指定更新
$(function(){
$("#toGet").click(function(){
$.get("testMeth",{"name":"zzjmay","age":100},function(data){//表示服务器传回来的参数
$("#loadGetMeth").text(data);
});
});
});
3)$.post(url,[data],[callback]):发送post的请求
$(function(){
$("#toPost").click(function(){
$.post("testMeth",{"name":"甲骨文公司","age":60},function(data){//data表示服务器传回来的参数
$("#loadGetMeth").text(data);
});
});
});
$.ajax(setting):是一种完整的写法,不推荐使用,唯一需要注意的就是里面的参数是以JSON的对象的形式进行封装的
参数名 | 说明 |
async | 逻辑值,默认为 true,即请求为异步请求 |
data | 发送到服务器的数据将自动转换为请求字符串格式 |
dataType | 返回的数据类型 |
error | 请求失败时调用函数 |
success | 请求成功后回调函数 |
timeout | 设置请求超时时间(毫秒) |
type | 发送请求的方式,默认为 GET |
url | 发送请求的地址 |