1.JSON 仅仅是一种文本字符串。它被存储在 responseText 属性中

为了读取存储在 responseText 属性中的 JSON 数据，须要依据 JavaScript 的 eval 函数。函数 eval 会把一个字符串当作它的參数。

然后这个字符串会被当作 JavaScript 代码来运行。由于 JSON 的字符串就是由 JavaScript 代码构成的，所以它本身是可运行的

比如例如以下方式:

 

String json = "{username:'一叶扁舟',age:22}";

var  json = xhr.responseText;

json = eval("("+json+")");

alert(json.name);

2.利用第三方工具解析JSON

(1).须要导入的jar包

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTY2MjMyMA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

(2)代码实战:

domain实体类：

package com.wenhao.web.ajax.domain;

/**

 *类的作用：City实体类

 *

 *

 *@author 一叶扁舟

 *@version 1.0

 *@创建时间： 2014-10-28   下午05:57:18

 */

//城市[JavaBean]

public class City {

	private int id;

	private String cityName;

	public City(){}

	public City(int id, String cityName) {

		super();

		this.id = id;

		this.cityName = cityName;

	}

	public int getId() {

		return id;

	}

	public void setId(int id) {

		this.id = id;

	}

	public String getCityName() {

		return cityName;

	}

	public void setCityName(String cityName) {

		this.cityName = cityName;

	}

}

servlet服务处理:

package com.wenhao.web.ajax.servlet;

import java.io.IOException;

import java.io.PrintWriter;

import java.util.ArrayList;

import java.util.List;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

import net.sf.json.JsonConfig;

import com.wenhao.web.ajax.domain.City;

/**

 *类的作用：JavaBean直接转成JSON对象

 *这个是json传输

 *

 *

 *@author 一叶扁舟

 *@version 1.0

 *@创建时间： 2014-10-28   下午05:58:20

 */

public class CityServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)

			throws ServletException, IOException {

		String province = request.getParameter("province");

		byte[] buf = province.getBytes("ISO8859-1");

		province = new String(buf,"UTF-8");

		response.setContentType("text/html;charset=UTF-8");

		PrintWriter pw = response.getWriter();

		List<City> cityList = new ArrayList<City>();

		String jsonString = null;

		if(province.equals("河南省")){

			cityList.add(new City(1,"郑州"));

			cityList.add(new City(2,"洛阳"));

			cityList.add(new City(3,"开封"));

			cityList.add(new City(4,"信阳"));

		}else if(province.equals("福建省")){

			cityList.add(new City(1,"福州"));

			cityList.add(new City(2,"厦门"));

			cityList.add(new City(3,"莆田"));

			cityList.add(new City(4,"漳州"));

			cityList.add(new City(5,"龙岩"));

		}else if(province.equals("云南省")){

			cityList.add(new City(1,"大理"));

			cityList.add(new City(2,"昆明"));

			cityList.add(new City(3,"香格里拉"));

		}

		JsonConfig jsonConfig = new JsonConfig();

		//json数据中不包括id属性

		jsonConfig.setExcludes(new String[]{"id"});

		//将cityList转成json数组

		JSONArray jsonArray = JSONArray.fromObject(cityList,jsonConfig);

		jsonString = jsonArray.toString();

		System.out.println("jsonString="+jsonString);

		pw.write(jsonString);

	}

}

jsp界面获取json数据:

<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

	<meta http-equiv="content-type" content="text/html; charset=UTF-8">

  </head>

  <body>

	<select id="provinceID">

		<option>选择省份</option>

		<option>河南省</option>

		<option>福建省</option>

		<option>云南省</option>

	</select>

	<select id="cityID">

		<option>选择城市</option>

	</select>

	<script type="text/javascript">

		document.getElementById("provinceID").onchange=function(){

			//清空原city列表框

			var citySelectElement = document.getElementById("cityID");

			var cityElementArray = citySelectElement.options;

			var size = cityElementArray.length;

			if(size > 1){

			//从后向前删除下拉列表框中的东西

				for(var i=size-1;i>0;i--){

					citySelectElement.removeChild(cityElementArray[i]);

				}

			}

			var province = this[this.selectedIndex].innerHTML;

			province = encodeURI(province);

			var xhr = createXHR();

			xhr.onreadystatechange = function(){

				if(xhr.readyState==4){

					if(xhr.status==200){

						//取得json字符串

						var jsonString = xhr.responseText;

						//将json字符串转成json对象

						var jsonObject = eval("("+jsonString+")");

						var size = jsonObject.length;

						for(var i=0;i<size;i++){

							var city = jsonObject[i].cityName;

							var optionElement = document.createElement("option");

							optionElement.innerHTML = city;

							document.getElementById("cityID").appendChild(optionElement);

						}

					}

				}

			}

			xhr.open("get","/FirstAjax/CityServlet?time="+new Date().getTime()+"&province="+province);

			xhr.send(null);

		};

		//创建一个ajax对象

		function createXHR(){

			var xhr = null;

			//假设是IE浏览器

			if(window.ActiveXObject){

				xhr = new ActiveXObject("microsoft.xmlhttp");

			}else{

		//非IE浏览器

				xhr = new XMLHttpRequest();

			}

			return xhr;

		}

	</script>

  </body>

</html>



測试效果图:



watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTY2MjMyMA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

js之第三方工具解析JSON的更多相关文章

  1. 转：JS中生成和解析JSON

    原文地址:JS中生成和解析JSON 1.JS中生成JSON对象的方法: var json = []; var row1 = {}; row1.id= "1"; row1.name ...

  2. JS中生成和解析JSON

    1.JS中生成JSON对象的方法: var json = []; var row1 = {}; row1.id= "1"; row1.name = "jyy"; ...

  3. js写ajax并解析json

    function down(t){  var req = createRequest();  //创建request req.open("GET","selectWord ...

  4. linux使用jq工具解析json

    jq类似一个awk或grep一样的神器,可以方便地在命令行操作json 这里我使用海南万宁的天气接口做演示,地址:http://t.weather.sojson.com/api/weather/cit ...

  5. mac工具-解析json visualJSON和JSON Accelerator这两款工具

  6. js中eval详解，用Js的eval解析JSON中的注意点

    先来说eval的用法,内容比较简单,熟悉的可以跳过eval函数接收一个参数s,如果s不是字符串,则直接返回s.否则执行s语句.如果s语句执行结果是一个值,则返回此值,否则返回undefined. 需要 ...

  7. 用Js的eval解析JSON中的注意点

    在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 使用eval函数来解析,并且使用jquery的ea ...

  8. 关于iOS中几种第三方对XML/JSON数据解析的使用

    Json XML 大数据时代,我们需要从网络中获取海量的新鲜的各种信息,就不免要跟着两个家伙打交道,这是两种结构化的数据交换格式.一般来讲,我们会从网络获取XML或者Json格式的数据,这些数据有着特 ...

  9. JS的全局函数eval解析JSON字符串

    JavaScript eval() 函数 定义和用法 eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码. 语法 eval(string) 参数 描述 string 必需. ...

随机推荐

  1. 黄聪：Microsoft Enterprise Library 5.0 系列教程(三) Validation Application Block (初级)

    原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(三) Validation Application Block (初级) 企业库提供了一个很强大的验证应用程序模 ...

  2. BZOJ 1975 SDOI2010 魔法猪学院 A*k短路

    题目大意:给定一个值E 求起点到终点的最多条路径 使长度之和不超过E k短路的A*算法--每一个点有一个估价函数=g[x]+h[x] 当中g[x]是从源点出发已经走了的长度 h[x]是从这个点到汇点的 ...

  3. 自由HTML5串行来到《HTML5具体解释Web开发的例子》连载（三）DOCTYPE和字符集

    于2.1.2通过新老科DOCTYPE控制,读者可以清晰地看到HTML 5精简旧体制的努力取得. DOCTYPE主要用于在开始的情况下,XML于,用作叙述性说明XML同意使用的元素.物业和安排.起初HT ...

  4. SQL注入的原理解说，挺好！

    原文地址:http://www.cnblogs.com/rush/archive/2011/12/31/2309203.html 1.1.1 总结 前几天,国内最大的程序猿社区CSDN网站的用户数据库 ...

  5. div 浮动框

  6. Java 8 时间日期库的20个使用示例

    java 8是如何处理时间及日期的 有人问我学习一个新库的最佳途径是什么?我的回答是,就是在实际项目中那样去使用它.在一个真实的项目中会有各种各样的需求,这会促使开发人员去探索和研究这个新库.简言之, ...

  7. 【Android进阶】Android面试题目整理与讲解（一）

    这一篇文章专门整理一下研究过的Android面试题,内容会随着学习不断的增加,如果答案有错误,希望大家可以指正 1.简述Activity的生命周期 当Activity开始启动的时候,首先调用onCre ...

  8. 【原创】leetCodeOj --- Word Ladder II 解题报告 （迄今为止最痛苦的一道题）

    原题地址: https://oj.leetcode.com/submissions/detail/19446353/ 题目内容: Given two words (start and end), an ...

  9. Div 滚动栏滚动到指定的位置

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. 非正确使用浮点数据由项目产生BUG讨论的问题

    乘分配 当小学学会了乘法分配.详细乘法分配:并与多个两个数相乘的,他们能够把这个数字乘以,然后加入.由于一个恒定.乘法分配律也能够使用表达式的定义"(a+b)×c = a×c+b×c&quo ...