关于ajax局部刷新的问题

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
   String path = request.getContextPath();
   String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
   request.setAttribute("showFlag", "false");
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图书查询</title>
<script type="text/javascript" src="<%=basePath%>/resources/js/jquery-1.4.2.js"></script>
</head>
<body>
   <center>
      <h1>图书查询</h1>
      <p>
         图书ID：<input type="text" name="bookId" id="bookId">
         图书名：<input type="text" name="bookName" id="bookName">
         分类：<input type="text" name="categoryName" id="categoryName">
         <input type="button" value="查询" id="search">
      </p>
      <hr>
      <table width="800px" cellspacing="0px" cellpadding="0px" border="1px">
         <thead>
            <tr>
               <th>图书ID</th>
               <th>书名</th>
               <th>分类</th>
               <th>价格</th>
               <th>描述</th>
            </tr>
         </thead>
         <tbody id="cont">
            <c:choose>
               <c:when test="${show == 'true'}">
                  <c:forEach items="${applicationScope.bookList}" var="book">
                     <tr>
                        <td id="tdBookId">${book.getBookId()}</td>
                        <td id="tdBookName">${book.getBookName()}</td>
                        <td id="tdBookCategory">${book.categoryName}</td>
                        <td id="tdPrice">${book.getPrice()}</td>
                        <td id="tdBookDesc">${book.getBookDesc()}</td>
                     </tr>
                  </c:forEach>
               </c:when>
               <c:otherwise>
                  <c:forEach items="${applicationScope.temporary}" var="book">
                     <tr>
                        <td id="tdBookId1">${book.getBookId()}</td>
                        <td id="tdBookName1">${book.getBookName()}</td>
                        <td id="tdBookCategory1">${book.categoryName}</td>
                        <td id="tdPrice1">${book.getPrice()}</td>
                        <td id="tdBookDesc1">${book.getBookDesc()}</td>
                     </tr>
                  </c:forEach>
               </c:otherwise>
            </c:choose>
         </tbody>
      </table>
   </center>
</body>
<script>
   $("#search").click(function () {
      $.ajax({
         url:"<%=basePath%>/SelectBookServlet",
         type:"post",
         data:{
             bookId:$("#bookId").val(),
            bookName:$("#bookName").val(),
                categoryName:$("#categoryName").val()
         },
         dataType:"json",
         success:function (result) {
            if(result.flag == 1)
                alert("该书不存在");
            else{
               // var list = eval(result);
               // for(var i in list){
               //     $("#tdBookId").text(list[i].bookId);
                    //     $("#tdBookName").text(list[i].bookName);
                    //     $("#tdBookCategory").text(list[i].categoryName);
                    //     $("#tdPrice").text(list[i].price);
                    //     $("#tdBookDesc").text(list[i].bookDesc);
               // }
                    window.location.href="<%=basePath%>/showBooks.jsp";
            }
            }
      });
    });
</script>
</html>

如上代码所示，在ajax回调函数success里面使用window.location.href="<%=basePath%>/showBooks.jsp";算不算局部刷新呢？？？

kiglig 2018-12-27

源自：监听器 2-5 作业题

收起

2回答

好帮手慕阿满回答被采纳获得+3积分 2018-12-27 15:47:12

同学你好，这里可以使用ajax局部刷新实现分类查询。定义一个查询的servlet，在该类中获取查询的参数，然后通过参数查询该书籍是否存在，存在则将满足条件的数据使用json回写给ajax，在showBook.jsp的ajax的回调函数中使用如下方式，将数据显示到页面。

success:function(result){
					var bookList = eval(result);
					var content=null;
					if(bookList!=null){
						for(var i in bookList){
							var id = bookList[i].id;
							var bookName = bookList[i].bookName;
							var catgoryName = bookList[i].catgoryName;
							var price = bookList[i].price;
							var description = bookList[i].description;
							content = content+"<tr><td>"+id+"</td><td>"+bookName+"</td><td>"+catgoryName+"</td><td>"+price+"</td><td>"+description+"</td></tr>";
							$("#cont>tr").remove();
						}			
					$("#cont").html(content);
						
					}
					}

如果我的回答解决了你的疑惑，请采纳。祝：学习愉快！

收起回答

好帮手慕阿满 2018-12-27 13:54:04

不算。windows.location.href="/url" 当前页面打开URL页面。相当于刷新了整个页面，不算局部刷新，而且同学试一下这种方法不能做分类查询。

如果我的回答解决了你的疑惑，请采纳。祝：学习愉快！

收起回答