一、大致功能
点击显示产品,一次显示5条数据,点击查看更多,再显示5条数据。
二、实现方式
jsp + ajax
三、代码实现
①、在ProductService中新增findByLimit()方法
如果是采取service和web分层的方式,务必记的重新编译、打包和安装,另外最重要的是要检查pom.xml中的依赖是否正确! 不正确的话会导致无法更新新方法
//查询当前页面的五条记录
public List<Product> findByLimit(int pageNum, int pageSize) {
sql = "select p.pid,p.pcode,p.pname,pt.ptid,pt.ptname,p.pprice,p.addtime " +
"from products p " +
"INNER JOIN ptype pt " +
"on p.ptid = pt.ptid limit "+ pageNum +","+pageSize +";";
List<Map<String,Object>> data = DBHelper.query(sql);
List<Product> products = new ArrayList<>();
for (Map<String,Object> row : data){
Product product = new Product(
Integer.parseInt(row.get("pid").toString())
,row.get("pcode").toString()
,row.get("pname").toString()
,new PType(Integer.parseInt(row.get("ptid").toString()),row.get("ptname").toString())
,Float.parseFloat(row.get("pprice").toString())
,row.get("addtime").toString());
products.add(product);
}
return products;
}
②、在product.jsp中添加ajax
<button id="seemore">显示更多</button>
<script type="text/javascript" src="js/jquery/jquery-3.4.1.js"></script>
<script>
var pageNum = 1;
$("#seemore").click(function(){
// ajax请求
$.ajax({
type: "post",
async: true,
dataType: "json",
data: "d01=" + pageNum,
url: "seeMore.do",
success: function(data){
pageNum++;
var content="";
$.each(data,function (i,product) {
content+="<tr>";
content+="<td>"+product["pid"]+"</td>"+"<td>"+product["pname"]+"</td>"+"<td>"+product["ptid"]["ptname"]+"</td>"+"<td>"+product["pprice"]+"</td>"+"<td>添加</td>";
content+="</tr>";
/!* {"pid":1,"pcode":"10001","pname":"iphone4","ptid":{"ptid":1,"ptname":"手机"},"pprice":100.0,"addtime":"2020-09-11 17:02:02.0"}*!/
});
$("#table01").append(content);
}
});
});
</script>
③、查看更多(SeeMoreAction)
- 获取ajax的传值
- 调用productservice中的findByLimit方法
- List对象接收返回值
- 将返回值以Json的形式传回product.jsp实现局部刷新
package com.lazy.servlet;
import com.google.gson.Gson;
import com.lazy.domain.Product;
import com.lazy.service.ProductService;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.util.List;
public class SeeMoreAction extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
int pageNum = Integer.parseInt(request.getParameter("d01")) * 5;
ProductService ps = new ProductService();
List<Product> data = ps.findByLimit(pageNum,5);
Gson gson=new Gson();
String product = gson.toJson(data);
System.out.println(product);
response.setContentType("text/json;charset=UTF-8");
response.getWriter().write(product);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doGet(req, resp);
}
}