jquery 局部刷新(jsp环境)__html_age_function_jsp_getResultPage_

当前位置: 编程技术>jquery

jquery 局部刷新(jsp环境)

来源: 互联网发布时间：2014-10-04

本文导语: 说明： Ajax和iframe都可以实现局部刷新，实现的功能也是基本相同的。这里分享一个用jquery实现的Ajax局部刷新。实现功能：在文本框中输入年龄后，在下面的中显示出数据库中该年龄的所有用户姓名。 1，jsp页面 ajaxshu...

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

这里分享一个用jquery实现的Ajax局部刷新。

实现功能：在文本框中输入年龄后，在下面的

中显示出数据库中该年龄的所有用户姓名。

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);
}
});
})
})

年龄：

姓名年龄

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:

代码示例:

${str.name} ${str.age}