`
Vince_Lee
  • 浏览: 62577 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

ajax与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
分享到:
评论

相关推荐

    ajax与json实现级联

    在本主题中,“ajax与json实现城市动态级联”指的是利用AJAX和JSON来创建一个动态的、联动的城市选择菜单,这种功能常见于地址输入或者地理位置相关的应用中。 首先,我们来理解AJAX的工作原理。AJAX通过...

    ajax+json实例

    **三、AJAX与JSON结合** 在.NET环境下,使用AJAX和JSON可以实现高效的前后端通信。.NET提供了System.Web.Script.Serialization命名空间下的JavaScriptSerializer类,用于将.NET对象序列化为JSON字符串,或者将JSON...

    第5章 ajax与json.zip

    在IT行业中,Ajax(异步JavaScript和XML)与JSON(JavaScript Object Notation)是Web开发中的两个关键概念,尤其在创建动态、交互性极强的网页应用时起着至关重要的作用。本章节将深入探讨这两个技术及其在实际应用...

    12JavaScript异步Ajax与json总结.docx

    **JavaScript异步Ajax与JSON详解** 在Web开发中,JavaScript异步Ajax技术是不可或缺的一部分,它使得网页可以在不刷新整个页面的情况下与服务器进行数据交互,极大地提升了用户体验。JSON(JavaScript Object ...

    Ajax+JSON 搜索框自动完成提示功能

    标题 "Ajax+JSON 搜索框自动完成提示功能" 涉及的是网页开发中的一个常见技术,用于提高用户输入体验。Ajax(异步JavaScript和XML)是Web开发中的一种技术,它允许页面在不重新加载整个页面的情况下与服务器交换数据...

    前台ajax与后台json传递

    "前台Ajax与后台Json传递"这个主题就是关注如何高效地实现这一交互过程。Ajax(Asynchronous JavaScript and XML)技术允许我们在不刷新整个页面的情况下,实现局部数据的更新,而Json(JavaScript Object Notation...

    什么是Ajax和json???

    ##### 2.2 JSON与XML对比 - **语法**:JSON使用键值对的形式,而XML使用标签。 - **大小**:JSON通常比XML更紧凑。 - **解析**:大多数现代浏览器和服务器都内置了解析JSON的功能,使得JSON的解析更简单快捷。 ###...

    Ajax+JSON 提交数据的演示

    Ajax与JSON结合 - **数据封装**:在Ajax请求中,JSON格式被用来封装要发送到服务器的数据,如表单字段值。这可以通过JavaScript对象创建,然后转化为JSON字符串。 ```javascript let data = { username: 'John ...

    Ajax-json.rar_JSON_ajax json_java Jquery ajax_javascript_json aj

    在IT行业中,Ajax(异步JavaScript和XML)与JSON(JavaScript Object Notation)是Web开发中的核心技术,尤其在创建交互式、动态网页时扮演着重要角色。本资源"Ajax-json.rar"显然是一份关于如何利用AJAX和JSON进行...

    Ajax、json实例学习代码

    然而,XML实际上并不是Ajax传输数据的唯一格式,JSON(JavaScript Object Notation)现在已经成为更常见且更受欢迎的数据交换格式,因为它更简洁、更易于解析,并且被广泛支持。 JSON是一种轻量级的数据交换格式,...

    ajax_json的开发包

    这个压缩包"ajax_JSON"可能包含了一些示例代码、教程或者工具,帮助开发者更好地理解和使用Ajax与JSON。这些资源可能涵盖如何创建Ajax请求,如何处理JSON数据,以及在各种场景下应用Ajax和JSON的最佳实践。对于初学...

    jQuery_Ajax_Json全解析

    JSON与JavaScript对象语法非常相似,使得在JavaScript中处理JSON数据变得非常直观。JSON数据结构包括对象(键值对)和数组(有序集合),例如: ```json { "name": "张三", "age": 30, "hobbies": ["阅读", ...

    jqury+ajax+json应用介绍

    ### jqury+ajax+json应用介绍 #### jQuery简介与特性 jQuery是一款轻量级的JavaScript库,它极大地简化了HTML文档...此外,JSON作为一种轻量级的数据交换格式,与Ajax相结合,使得前后端之间的数据传递变得更加高效。

    AJAXJSON的实现

    现在,我们将深入探讨AJAXJSON的实现。 首先,理解AJAX的基本工作原理是至关重要的。AJAX的核心是XMLHttpRequest对象,这是一个内置在浏览器中的对象,它可以异步地向服务器发送请求并接收响应。创建一个...

    一头扎进Ajax&Json视频教程第一讲

    在IT行业中,Ajax(Asynchronous JavaScript and XML)与Json(JavaScript Object Notation)是Web开发中的重要技术,尤其在创建动态、交互性丰富的网页应用时不可或缺。本视频教程"一头扎进Ajax&Json视频教程第一讲...

    ajax + json 练习

    通过以上知识点的学习和实践,开发者能够熟练地使用Ajax与JSON进行动态网页开发,提升用户的互动体验。在实际项目中,还可以结合现代前端框架(如React、Vue或Angular)进一步优化和管理这些交互。

    Ajax&Json笔记

    **Ajax与JSON的结合** 在Ajax应用中,JSON经常被用作数据交换格式,因为它能直接被JavaScript解析,不需要额外的解析库。当一个Ajax请求发送到服务器时,服务器端处理请求并返回JSON格式的数据。JavaScript的...

    AjaxJson实体类与依赖包

    综上所述,`AjaxJson`实体类与`fastjson`库的结合使用,可以极大地提高后端处理Ajax请求和响应的效率,同时简化了前后端之间的数据交互。在开发过程中,通过这样的设计,可以使得接口返回更加规范,提高代码的可读性...

    java对象转Json AjaxJson数据交换 需要用到的所有包

    本教程主要讲解如何使用Java将对象转化为JSON,并结合AjaxJson进行数据交换。 首先,我们需要引入相关的库,如标题所示,"java对象转Json AjaxJson数据交换"涉及到的几个jar包可能包括Jackson、Gson、Fastjson等...

Global site tag (gtag.js) - Google Analytics