关于ajax局部刷新的问题
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | <%@ 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";算不算局部刷新呢???
2
收起
正在回答
2回答
同学你好,这里可以使用ajax局部刷新实现分类查询。定义一个查询的servlet,在该类中获取查询的参数,然后通过参数查询该书籍是否存在,存在则将满足条件的数据使用json回写给ajax,在showBook.jsp的ajax的回调函数中使用如下方式,将数据显示到页面。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 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); } } |
如果我的回答解决了你的疑惑,请采纳。祝:学习愉快!
从网页搭建入门Java Web2018版
- 参与学习 人
- 提交作业 1088 份
- 解答问题 10204 个
如果你有Java语言基础,又想以后从事Java Web开发,那么本路径是你的不二选择!本路径从网页搭建开始入手,通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧