我想通過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="https://bbs.csdn.net/topics/js/jquery.js"></script>
<link href="https://bbs.csdn.net/topics/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="https://bbs.csdn.net/topics/css/font-awesome.min.css" rel="stylesheet">
<link href="https://bbs.csdn.net/topics/css/style.css" rel="stylesheet">
<!--link href="https://bbs.csdn.net/topics/css/blog-single.css" rel="stylesheet">
<link href="https://bbs.csdn.net/topics/css/responsive.css" rel="stylesheet"-->
<!--彈出框 -->
<link rel="stylesheet" type="text/css" href="https://bbs.csdn.net/topics/css/xcConfirm.css"/>
<script src="https://bbs.csdn.net/topics/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="https://bbs.csdn.net/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=https://bbs.csdn.net/topics/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=https://bbs.csdn.net/topics/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);
}
}
uj5u.com熱心網友回復：
自己多學下js，ajax已經脫離服務器端了，用服務器端標簽決議沒用Web開發學習資料推薦
jqGrid導航Navigator配置
jQuery dataType指定為json注意事項
uj5u.com熱心網友回復：
既然選擇了AJAX異步重繪，C foreach 就不要用了，用JS代碼吧資料刷到頁面上去吧uj5u.com熱心網友回復：
怎么搞啊。。。。。。。。。
uj5u.com熱心網友回復：
動態重繪，就是拼HTML代碼，把原來的串列HTML代碼替換了uj5u.com熱心網友回復：
如何在指定的位置去重繪html呢
uj5u.com熱心網友回復：
實作方式有多中，列舉2個吧：1：angular或者vue資料雙向系結可以實作(但是因為你現在使用的是jsp頁面，改動還是比較大，暫不推薦)
2：ajax獲取到json資料回來，使用模板渲染，將json資料傳給模板，進行渲染輸出到指定元素；模板引擎推薦使用artTemplate
uj5u.com熱心網友回復：
哎，你是自學嗎？前后端都分不清楚。假設你用ajax呼叫成功回傳結果到success回呼函式中，通過js去操作資料，結合jQuery生成你想要的展示效果，比如說做一個表格之類的。uj5u.com熱心網友回復：
明白你說的 但是如何用新的資料去替換掉原來的資料呢
uj5u.com熱心網友回復：
弄個字串， empty() append()uj5u.com熱心網友回復：
ajax或者回傳html片段，或者json,可以通過頁面元素的innerHTML屬性進行修改，比如<div id='mydiv'></div>,可以document.getElementById('mydiv').innerHTML=你拼接的html。uj5u.com熱心網友回復：
$(function(){$(".clickBrandWidget").children("a").click(function(){
$.post("Servlet",{"method":"ajax","info":$(".aaa").attr('title')},function(obj){
alert(obj);
var jsonobj=eval("("+obj+")");
var typeobj=jsonobj.typecars;
var his=" <c:forEach var='cx' items="+${typeobj }+"> <a href='javascript:tianjia('${cx.chexi}')' title='${cx.chexi
}'> ${cx.chexi}</a> </c:forEach>";
$("dd [class='clickBrandWidget']").children('a').html(his);
});});});
我的這一段代碼<c:forEach var='cx' items="+${typeobj }+">其中items=""其中是一個集合，控制臺報的錯誤是Property [chexi] not found on type [java.lang.String]，我感覺就是因為一樓大佬說的無法決議，只能放棄了
uj5u.com熱心網友回復：
感覺決議不了,乖乖用js吧uj5u.com熱心網友回復：
你這種方式是不可能實作的。用了ajax,那就用js去回圈資料轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/83094.html
標籤：Ajax