jquery 局部刷新(jsp环境)
说明:
Ajax和iframe都可以实现局部刷新,实现的功能也是基本相同的。
这里分享一个用jquery实现的Ajax局部刷新。
实现功能:在文本框中输入年龄后,在下面的<div>中显示出数据库中该年龄的所有用户姓名。
1,jsp页面 ajaxshuaxin.jsp:
$(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>
2,文件 ajaxShuaXin.java:
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:
<p>${str.name} ${str.age}</p>
</c:forEach>
您可能感兴趣的文章:
jquery 局部刷新(jsp环境)
Jquery 定时局部刷新的代码举例
JSP常见问题
jQuery 定时局部刷新(setInterval)
JSP开发入门(4)-JSP的内部对象
jQuery 定时局部刷新(setInterval)方法总结
jquery刷新页面 jquery局部刷新与及全页面刷新
jquery ajax 局部刷新小案例
jquery刷新页面的实现代码(局部及全页面刷新)
servlet与jsp基础教程(2)-设置开发、运行环境