您的位置：首页 > 其它

利用ajax对页面局部刷新

2017-09-24 22:00 369 查看

一、jsp页面代码

</head>

<body>

    <input type="button" value="显示" /><br/>

    <div id= "opt_area" >



    </div>

</body>

</html>

二、show.jsp代码

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<ul>

<c:forEach var="temp" items="${allNews }">

  <li>${temp.title }<li>

</c:forEach>

</ul>

三、js代码（注释部分请忽略）

<script type="text/javascript">

  var jq = $.noConflict();

  jq(function() {

   jq("input[type='button']").click(function() {

    jq.ajax({

     url:"${pageContext.request.contextPath }/NewsServlet",

     type:"POST",

     data:"opr=listHtml",

     dataType:"html",//注意返回类型

     success:function(data) {

     //alert(data.List.list.length);

      /* var jqnewsList = jq("#opt_area>ul").empty();

       for(var i = 0; i < data.List.list.length; i ++) {

       jqnewsList.append("<li>"+data.List.list[i].title+"<li>");

       } */

      jq("#opt_area").html(data);//需要刷新的内容

     }



    });



   });



  });

</script>

四、servlet代码（注释部分请忽略）

public void doPost(HttpServletRequest request, HttpServletResponse response)

   throws ServletException, IOException {

  request.setCharacterEncoding("UTF-8");

  response.setContentType("text/html;charset=UTF-8");

  PrintWriter out = response.getWriter();

  String opr = request.getParameter("opr");

  List<Object> list = new ArrayList();

  List<News> allNews = null;

  Map<String, Object> map = new HashMap();

  Map<String, Object> map1 = new HashMap();

  String str="";

  if("listHtml".equals(opr)) {

   NewsService newsService = new NewsServiceImpl();

   allNews = newsService.getAllNews();

   /*//str += this.createJson(allNews);

   for(int i = 0; i < allNews.size(); i ++) {

    str+="<li>"+allNews.get(i).getTitle()+"<li>";

   }

   list.addAll(allNews);

   //String strList = JSON.toJSONString(list, SerializerFeature.WriteMapNullValue, SerializerFeature.WriteNullNumberAsZero,SerializerFeature.WriteNullStringAsEmpty,SerializerFeature.WriteNullListAsEmpty);

   //map.put("list", list);



   str=JSON.toJSONString(list, SerializerFeature.WriteMapNullValue, SerializerFeature.WriteNullNumberAsZero,SerializerFeature.WriteNullStringAsEmpty);

   JSONArray parseArray = JSONArray.parseArray(str);

   JSONArray jsonArray = new JSONArray(list);

   map1.put("list", jsonArray);

   map.put("List", map1);

   JSONObject JSONOBJ = new JSONObject(map);

   out.print(JSONOBJ);*/

  }

  request.setAttribute("allNews", allNews);

  request.getRequestDispatcher("/show.jsp").forward(request, response);//这个地方很关键，为了避免编写大量构建HTML内容代码，可以将数据发送至专门展示页面生成的页面即show.jsp

show.jsp中仅包含客户端展示数据所需的<li>元素，没有其他页面结构，产生的内容将作为响应发送会客户端，直接嵌入页面中使用

  out.close();

}

五、当在页面中单击显示按钮时会出现相应内容

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航