(转)jQuery实现异步刷新

Ajax和iframe都可以实现局部刷新。他们实现的功能基本一样。

下面是一个用jquery实现的Ajax局部刷新。

实现的功能是在文本框中输入年龄后，在下面的<div>中显示出数据库中该年龄的所有用户姓名

ajaxshuaxin.jsp:

<script type=”text/javascript”>
$(function(){

$(“input:eq(1)”).click(function(){

$(“#show”).html(“”);
$.ajax({
type:”POST”, //请求方式
url:”ajaxshuaxin.do”, //请求路径
cache: false, //(默认: true,dataType为script和jsonp时默认为false) jQuery 1.2 新功能，设置为 false 将不缓存此页面。

data:”age=”+$(“input:eq(0)”).val(), //传参
dataType: “html”, //返回值类型 使用json的话也可以，但是需要在JS中编写迭代的html代码，如果格式样式
success:function(data){ 复杂的话还是用html返回类型好


$(“#show”).html(data);

}
});

})

})


</script>

年龄：<input type=”text” name=”age”>
<input type= “button” name=”submit” value=”http://zhaoshijie.iteye.com/blog/查询”>

<p>姓名  年龄</p>
<div id=”show”></div>


ajaxShuaXin.java:

String age = req.getParameter(“age”);
List list = helpService.getList(age); //通过age查询数据库中的数据

HashMap map = new HashMap();
map.put(“list”, list);

return new ModelAndView(getResultPage(),map); //getResultPage()是shuaxin.jsp

shuaxin.jsp:

<c:forEach var=”str” items=”${list}”>

<p>${str.name}  ${str.age}</p>

</c:forEach>