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>姓名&nbsp;&nbsp;年龄</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}&nbsp;&nbsp;${str.age}</p>
       
</c:forEach>

 

 

 

 

 

 

评论

2 楼 zceolrj 2014-04-21  

为什么我按照你的这个实例来写，最后#show显示的是如下的字符串？
{"view":null,"model":{"list":["Book","first","second"]},"empty":false,"viewName":"docHub/testConfig","reference":true,"modelMap":{"list":["Book","first","second"]}}

1 楼 ocaicai 2011-10-25  

" Ajax和iframe都可以实现局部刷新"，这句话简直是我的救星，因为我之前只知道ajax或者iframe，现在我将两者一起来使用了！