Home > front end >  How to use ajax in the JSP page the json data returned from the server, and through the c: foreach t
How to use ajax in the JSP page the json data returned from the server, and through the c: foreach t

Time:09-27

I think through ajax can realize the function of a product selection, through the way of ajax will filter condition to the servlet servlet the query to the commodity information encapsulated into a List Collection, and then into a json string array to ajax.
I want to use the page c: foreach to iterate over the json array, to achieve the function of dynamic refresh screen,
But the problem is even in js (ajax) will be returned to the data into an array Object, in the JSP page is unable to access to the array, using JSP expressions or el expression cannot in js array in the field, if I want to directly to splice HTML code in the js code, and more complex,,,, this problem bothering me for a long time, hope to get a great god answers,

Originally the JSP is used to display data as servlet storing List Data,
<% List Rexiaophone=(List) Request. The getAttribute (" rexiaophone "); %>
Using ajax, now can only be json data types of arrays, how to traverse in page

The JSP code:
<% @ page language="Java" contentType="text/HTML. Charset=utf-8 "
PageEncoding="utf-8" % & gt;
<% @ page import="Java. Util. *, com. CXSW. ZMS. Po. *" % & gt;
<% @ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" % & gt;
<% PageProductModel allphone=(PageProductModel) request. GetAttribute (" allphone "); %>
<% List Rexiaophone=(List) Request. The getAttribute (" rexiaophone "); %>


<meta charset="utf-8" & gt;

Mobile phone mall & lt;/title> <br/><! - ALL STYLESHEET - & gt; <br/><script SRC="https://bbs.csdn.net/topics/js/jquery.js" & gt; </script> <br/><The link href="https://bbs.csdn.net/topics/bootstrap/css/bootstrap.min.css" rel="stylesheet" & gt; <br/><The link href="https://bbs.csdn.net/topics/css/font-awesome.min.css" rel="stylesheet" & gt; <br/><The link href="https://bbs.csdn.net/topics/css/style.css" rel="stylesheet" & gt; <br/><! - link href="https://bbs.csdn.net/topics/css/blog-single.css" rel="stylesheet" & gt; <br/><The link href="https://bbs.csdn.net/topics/css/responsive.css" rel="stylesheet" - & gt; <br/><! - the pop-up box - & gt; <br/><link rel="stylesheet" type="text/CSS" href="https://bbs.csdn.net/topics/css/xcConfirm.css"/& gt; <br/><script SRC="https://bbs.csdn.net/topics/js/xcConfirm.js" type="text/javascript" charset="utf-8" & gt; </script> <br/><The script type="text/javascript" & gt; <br/>The function filter () {<br/>var a=""; <br/>Var obj=document. GetElementsByName (" brand "); <br/>for(var i=0; I<Obj. Length; I++) {<br/>If (obj [I]. Checked) {<br/>A +=obj [I] value + ", "; <br/>} <br/>} <br/>//alert (a.s ubstring (0, a. ength - 1)); <br/>//the window. The location="${pageContext. Request. ContextPath}/GetProductsByBrandServlet? Pro_kind=cell phone & amp; Brand="+ a.s ubstring (0, a. ength - 1); <br/><br/>var xmlHttp; <br/><br/>XmlHttp=null; <br/>If (window. The XMLHttpRequest) {<br/>xmlHttp=new XMLHttpRequest(); <br/>} the if (xmlHttp!=null) {<br/>XmlHttp. Onreadystatechange=state_Change; <br/>XmlHttp. Open (" GET ", "${pageContext. Request. ContextPath}/GetProductsByBrandServlet? Pro_kind=cell phone & amp; Brand="+ a.s ubstring (0, a. ength - 1), false); <br/>xmlHttp.send(null); <br/>} <br/><br/>The function state_Change () <br/>{<br/>If (xmlHttp. ReadyState==4) <br/>{//4="the loaded" <br/>If (xmlHttp. Status==200) <br/>{//200="OK" <br/>Var x=xmlHttp. The responseText; <br/>Var obj=eval (x); <br/>Alert (obj); <br/>//how to use the data returned in the JSP page obj <br/>} <br/>The else <br/>{<br/>Alert (" Problem retrieving data: "+ XMLHTTP. StatusText); <br/>} <br/>} <br/><br/></script> <br/><! - & lt; The script type="text/javascript" & gt; <br/>The function filter () {<br/>var a=""; <br/>Var obj=document. GetElementsByName (" brand "); <br/>for(var i=0; I<Obj. Length; I++) {<br/>If (obj [I]. Checked) {<br/>A +=obj [I] value + ", "; <br/>} <br/>} <br/>//alert (a.s ubstring (0, a. ength - 1)); <br/>Window. The location="${pageContext. Request. ContextPath}/GetProductsByBrandServlet? Pro_kind=cell phone & amp; Brand="+ a.s ubstring (0, a. ength - 1); <br/>} <br/><br/></script> --> <br/><br/><br/><The script type="text/javascript" & gt; <br/>Window. The onl oad=function () {<br/>If (& lt; % %=allphone & gt;==null) {<br/>Window. The location="${pageContext. Request. ContextPath}/PhonePageServlet"; <br/>}; <br/>} <br/></script> <br/><br/></head> <br/><body> <br/>//here using ajax data returned by the <br/><C: forEach items="${rexiaophone}" var="rexiao" end="2" & gt; <br/><Div & gt; <br/><Div & gt; <br/><! - span & gt; <Div> Sale</div> </span - & gt; <br/><Span & gt; <br/><Img SRC="https://bbs.csdn.net/upload/${rexiao. Pro_mainimg}" Alt="" & gt; <br/><Div & gt; <br/><A href="" & gt; <i> </i> </a> <br/><A href="" & gt; <i> </i> </a> <br/></div> <br/></span> <br/><Div & gt; <br/><Div & gt; The ${rexiao, prod_name} <br/><Div & gt; <br/><i> </i> <br/><i> </i> <br/><i> </i> <br/><i> </i> <br/><i> </i> <br/></div> <br/></div> <br/><H3 & gt; The ${rexiao. Pro_priint} & lt;/h3 & gt; <br/><strong> RMB ${rexiao. Pro_price} & lt;/strong> <br/><Div> <A href="javascript: (0)" onclick="testLogin (${rexiao. Pro_itemnum})" role="button" & gt; Add to cart & lt;/a> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; <br/><nullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnull </div> <div class="th_page th_page_color"></div> <div class="umCopyright"> <p>Page link:<a href="/frontend/36782.html" target="_blank" style="color:#999">https//www.codepudding.com/frontend/36782.html</a></p> </div> <div class="detail-arr"> <div class="detail-arr-left">Prev:<a href='/frontend/36781.html'>The use of notes [study] webpack of Vue</a></div> <div class="detail-arr-right">Next:<a href='/frontend/36783.html'>Sublime does text, opened in the browser open the inside is not the problem, the small white online</a></div> </div> </div> </div> </div> </div> <div class="container th_top"> <div class="row"> <div class="col-md-12"> <div class="hot-tags neitags"> <ul> <li><i class="iconfont icon-x-tags"></i> Tags:  </li> <a href='/e/tags/?tagname=Ajax' target='_blank'>Ajax</a> </ul> </div> </div> </div> </div> <div class="container th_top"> <div class="row"> <div class="col-md-12"> <div class="xiangguan"> <ul class="msg msghead"> <li class="tbname">Related</li> </ul> <ul> </ul> </div> </div> </div> </div> <div class="container th_top"> <div class="row"> <div class="col-md-12"> <div class="flinks"> <ul> <li><i class="iconfont icon-x-tags"></i> Links:  </li> <li class="liflinks"><a target="_blank" href="/" title="CodePudding">CodePudding</a></li> </ul> </div> </div> </div> </div> <div class="footer"> <p><span style="font-size:16px;color:#666;font-weight: bold">About Us:</span>  <a href="https://www.codepudding.com/contact.html">Contact Us</a>      <a href="https://www.codepudding.com/service.html">Terms of Service</a>      <a href="https://www.codepudding.com/privacy.html"> Privacy Policy</a></p> <p class="foot_info">Copyright © 2010-2023,Powered By <a href="/" target="_blank">CodePudding</a> </p> </div> <script type="text/javascript" src="/skin/code/tianhu.js"></script> </body></html>