利用Jquery的Ajax技术,可以非常方便地实现页面的局部刷新、后台参数传递等。其基本用法如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(function(){
$("#clickMe").click(function(){
$.ajax({
url:"后台处理页面,这里可以是php/asp/.net/jsp/action/等页面或程序",
type:"post",
dataType:'json',
data:{参数名:参数值,参数名:参数值,...},
success:showResult //注意最后一个参数结尾没有逗号。success是指后台动作完成后当前页面所要做的工作,通常就是调用另一个函数向用户反馈结果。
});
});
})
function showResult(data) //这里的参数data用来接收后台处理程序所反回的结果
{
$("#result").html(data) //将接收到的反馈结果异步加载到当前页面的元素中
}
</script>
</head>
<body>
本例要实现的效果是,点击“加载内容”按钮后,当前页面会在后台将参数提交到相应的处理程序,接收后台处理程序反馈的结果,并在当前页面上显示。用户始终停留在当前页面中。<br />
<input type="button" id="clickMe" value="加载内容">
<div id="result">现在内容为空。</div>
</body>
</html>