现在的位置: 首页 > 综合 > 正文

Jquery中ajax的用法

2012年11月07日 ⁄ 综合 ⁄ 共 990字 ⁄ 字号 评论关闭

利用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>

抱歉!评论已关闭.