jquery 局部刷新(jsp环境)

发布时间:2020-11-20编辑:脚本学堂
本文介绍下,jquery实现局部刷新的方法,与jsp代码结合,实现页面内容的局部刷新,有需要的朋友参考下。

说明:
Ajax和iframe都可以实现局部刷新,实现的功能也是基本相同的。

这里分享一个用jquery实现的Ajax局部刷新。
 
实现功能:在文本框中输入年龄后,在下面的<div>中显示出数据库中该年龄的所有用户姓名。
 
1,jsp页面 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>姓名&nbsp;&nbsp;年龄</p> 
<div id="show"></div>

2,文件 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
 

3,shuaxin.jsp:
 

复制代码 代码示例:
<c:forEach var="str" items="${list}">
<p>${str.name}&nbsp;&nbsp;${str.age}</p>
</c:forEach>