ajax与json

使用Ajax与Servlet获取并展示焦点新闻

最新推荐文章于 2022-08-21 18:08:18 发布

原创最新推荐文章于 2022-08-21 18:08:18 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #import #json #xmlhttprequest #list #function

ssh 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了如何通过Ajax请求Servlet来获取焦点新闻数据，并将其解析为JSON格式，然后在前端进行展示，包括数据获取、Servlet返回JSON、JSON解析及数据显示等关键步骤。

1.ajax请求servlet(picnews.js)

//1定义 var xmlHttp = false; //2，创建 function createXmlHttp() { if(window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else { xmlHttp = new XMLHttpRequest(); } } function getData() { createXmlHttp(); var url = "servlet/FocusNewsServlet"; //打开异步请求 xmlHttp.open("get",url,"true"); //监听异步请求状态 xmlHttp.onreadystatechange = callback; //发送异步请求 xmlHttp.send(); } function callback(){ if(xmlHttp.readyState == 4) { var json = xmlHttp.responseText; var res = eval('('+json+')'); //for(var i in json) // { // alert("picId"+i+"="+res.list[i].picId); //alert:imgUrl2=images/homead/2011060301.jpg // } showFocus(res); } }; function showFocus(res) { var focus_width=280; var focus_height=180; var text_height=0; var swf_height=focus_height + 0; var pic1=res.list[2].picUrl; var pics="UploadImages/"+res.list[0].picUrl+"###UploadImages/"+res.list[1].picUrl+"###UploadImages/"+res.list[2].picUrl+"###UploadImages/"+res.list[3].picUrl+"###UploadImages/"+res.list[4].picUrl; var links=res.list[0].picLink+"###"+res.list[1].picLink+"###"+res.list[2].picLink+"###"+res.list[3].picLink+"###"+res.list[4].picLink; var texts=res.list[0].picText+"###"+res.list[1].picText+"###"+res.list[2].picText+"###"+res.list[3].picText+"###"+res.list[4].picText; var descripts=res.list[0].picDescripts+"###"+res.list[1].picDescripts+"###"+res.list[2].picDescripts+"###"+res.list[3].picDescripts+"###"+res.list[4].picDescripts+""; var fo = new SWFObject("swf/pix.swf", "_FocusObj", focus_width, swf_height, "7","F6F8FA"); fo.addVariable("pics", pics); fo.addVariable("links", links); fo.addVariable("texts", texts); fo.addVariable("descripts", descripts); fo.addVariable("borderwidth", focus_width); fo.addVariable("borderheight", focus_height); //fo.addVariable("textheight", text_height); fo.addVariable("border_color", "#666"); //fo.addVariable("fontsize", "24"); //fo.addVariable("fontcolor", "FFFFFF"); fo.addVariable("is_border", ""); fo.addVariable("is_text", "1"); fo.addParam("wmode", "opaque"); fo.write("FocusObj"); } getData();

2.servlet返回json至前端

package com.bc.servlet; import java.io.IOException; import java.io.PrintWriter; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONObject; import com.bc.bean.AdminSheet; import com.bc.dao.AdminOrclDAO; import com.bc.dao.impl.daoImpl; public class FocusNewsServlet extends HttpServlet { /** * Constructor of the object. */ public FocusNewsServlet() { super(); } /** * Destruction of the servlet. <br> */ public void destroy() { super.destroy(); // Just puts "destroy" string in log // Put your code here } /** * The doGet method of the servlet. <br> * * This method is called when a form has its tag value method equals to get. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); AdminOrclDAO dao=new AdminOrclDAO(); List list=dao.findAllPicNewsSheet(); // request.setAttribute("list", list); // RequestDispatcher requestDispatcher = request.getRequestDispatcher("/Admin/PortalFlashList.jsp"); // requestDispatcher.forward(request,response); // String[] adName={}; // for (int i = 0; i < list.size(); i++) { // System.out.println(((AdminSheet)(list.get(i))).getAdName()); // out.print(((AdminSheet)(list.get(i))).getAdName()); // } Map<String,Object> map = new HashMap<String,Object>(); // map.put("a", "aaaa"); map.put("list",list ); JSONObject obj=JSONObject.fromObject(map); // out.println("<!DOCTYPE HTML PUBLIC /"-//W3C//DTD HTML 4.01 Transitional//EN/">"); // out.println("<HTML>"); // out.println(" <HEAD><TITLE>A Servlet</TITLE></HEAD>"); // out.println(" <BODY>"); // out.print("${requestScope.}"); // out.print(this.getClass()); // out.println(", using the GET method"); // out.println(" </BODY>"); // out.println(list); out.println(obj); out.flush(); out.close(); } /** * The doPost method of the servlet. <br> * * This method is called when a form has its tag value method equals to post. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html"); PrintWriter out = response.getWriter(); out.println("..."); out.flush(); out.close(); } /** * Initialization of the servlet. <br> * * @throws ServletException if an error occurs */ public void init() throws ServletException { // Put your code here } }

3.js解析json,取出数据

代码已在1,picnews.js内,解析方式:var res = eval('('+json+')');

取值json对象方式为:

res.list[i].picId