如何在jsp页面中使用ajax从服务器返回的json数据,并通过c:foreach 遍历其
凌乱533 2017-12-11 11:16:09 我想通过ajax实现一个商品筛选的功能,通过ajax的方式将筛选条件传到servlet servlet把查询到的商品信息封装成一个List<Product>的集合,再转化成json数组字符串返回到ajax.
我想在页面上用c:foreach去循环遍历这个json数组,以此实现动态刷新的筛选功能。
但问题是即使在js(ajax)中将返回来的数据变成Object数组,在jsp页面是无法访问到这个数组的,通过jsp表达式或者el表达式也无法在js中将数组存放在域里,如果我想直接在js代码中去拼接html代码,又比较复杂。。。。这个问题困扰我好久了,希望能得到大神的解答。
本来jsp用于显示的数据是servlet存放的List<Product>数据 。
<%List<Product> rexiaophone=(List<Product>)request.getAttribute("rexiaophone");%>
<c:forEach items="${rexiaophone}" var="rexiao" end="2">
现在采用ajax方式,数据只能是json类型的数组。如何在页面中遍历
JSP代码:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@page import="java.util.*,com.cxsw.zms.po.*"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%PageProductModel allphone=(PageProductModel)request.getAttribute("allphone");%>
<%List<Product> rexiaophone=(List<Product>)request.getAttribute("rexiaophone");%>
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<head>
<title>手机商城</title>
<!-- ALL STYLESHEET -->
<script src="js/jquery.js"></script>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!--link href="css/blog-single.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet"-->
<!--弹出框 -->
<link rel="stylesheet" type="text/css" href="css/xcConfirm.css"/>
<script src="js/xcConfirm.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function filter(){
var a="";
var obj=document.getElementsByName("brand");
for(var i=0;i<obj.length;i++){
if(obj[i].checked){
a+=obj[i].value+",";
}
}
//alert(a.substring(0, a.length-1));
//window.location="${pageContext.request.contextPath}/GetProductsByBrandServlet?pro_kind=手机&brand="+a.substring(0, a.length-1);
var xmlHttp;
xmlHttp = null;
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}if(xmlHttp!=null){
xmlHttp.onreadystatechange=state_Change;
xmlHttp.open("GET","${pageContext.request.contextPath}/GetProductsByBrandServlet?pro_kind=手机&brand="+a.substring(0, a.length-1),false);
xmlHttp.send(null);
}
function state_Change()
{
if (xmlHttp.readyState==4)
{// 4 = "loaded"
if (xmlHttp.status==200)
{// 200 = "OK"
var x =xmlHttp.responseText;
var obj = eval(x);
alert(obj);
//如何在jsp页面中使用返回的数据obj
}
else
{
alert("Problem retrieving data:" + xmlhttp.statusText);
}
}
</script>
<!-- <script type="text/javascript">
function filter(){
var a="";
var obj=document.getElementsByName("brand");
for(var i=0;i<obj.length;i++){
if(obj[i].checked){
a+=obj[i].value+",";
}
}
//alert(a.substring(0, a.length-1));
window.location="${pageContext.request.contextPath}/GetProductsByBrandServlet?pro_kind=手机&brand="+a.substring(0, a.length-1);
}
</script> -->
<script type="text/javascript">
window.onload=function(){
if(<%=allphone%>==null){
window.location="${pageContext.request.contextPath}/PhonePageServlet";
};
}
</script>
</head>
<body>
//在此处使用ajax返回的数据
<c:forEach items="${rexiaophone}" var="rexiao" end="2">
<div class="col-sm-4">
<div class="thumbnail">
<!--span class="e-label"><div>Sale</div></span-->
<span class="service-link text-center">
<img class="img-responsive" src="/upload/${rexiao.pro_mainimg}" alt="">
<div class="list-inline">
<a href=""><i class="fa fa-eye"></i></a>
<a href=""><i class="fa fa-link"></i></a>
</div>
</span>
<div class="caption">
<div class="category"> ${rexiao.prod_name}
<div class="pull-right">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
</div>
<h3>${rexiao.pro_priint}</h3>
<strong>¥${rexiao.pro_price}</strong>
<div><a href="javascript:(0)" onclick="testLogin(${rexiao.pro_itemnum})" class="btn btn-default" role="button">加入购物车</a>
<a href="javascript:(0)" class="btn btn-default" onclick="testLogin(${rexiao.pro_itemnum})" role="button">立即购买</a></div>
</div>
</div>
</div>
</c:forEach>
</div>
</div>
ajax后台代码:
package com.cxsw.zms.servlet;
import java.io.IOException;
import java.io.OutputStream;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.cxsw.zms.po.Product;
import com.cxsw.zms.service.ProductMangement;
import com.cxsw.zms.service.ProductMangementImpl;
import com.google.gson.Gson;
@WebServlet("/GetProductsByBrandServlet")
public class GetProductsByBrandServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
String brand="";
String pro_kind="";
List<Product> data=null;
List<Product> rexiaophone=null;
ProductMangement pm=new ProductMangementImpl();
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
brand=request.getParameter("brand");
pro_kind=request.getParameter("pro_kind");
data=pm.ShaiXuanProduct(brand, pro_kind);
if(pro_kind.equals("手机")){
rexiaophone=pm.GetRexiaoPhone();
Gson json = new Gson();
String a = json.toJson(data);
PrintWriter out =response.getWriter();
out.write(a);
request.setAttribute("rexiaophone", rexiaophone);
request.setAttribute("shaixuanphone",data);
/* request.getRequestDispatcher("/shaixuanphone.jsp").forward(request, response);*/
}/*if(pro_kind.equals("笔记本电脑")){
request.setAttribute("shaixuanbijiben",data);
request.getRequestDispatcher("/shuaixuanbijiben.jsp").forward(request, response);
}*/
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}