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="查询">??
?????
???? <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>
?
?
?
?
?
?
