Json数组存入数据库与前台JS解析

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一个子集。在Java中运用较多，尤其在Ajax技术中。这里，我们讨论的是前台将数组数据转为Json字符串存入数据库中，并将数据在前台用Js解析出来。

就如，一个行业有多种职业，在数据库中我们就可以设一个职业字段，存储代表职业数组的Json字符串，这样就不用在数据库中再建一个行业与职业的关系表，从而可以减少连表查询，当然这样做的前提是行业与职业的关系在应用中很少用到，而且不经常变更。

这里的示例是，用户为一个行业选择多个职业，然后在前台拼接成String存入数据库。还有将数据取出，解析Json成数组（包括前台与后台），最后在前台显示出来。

在示例中，用的表，字段简要的为：

一个职业表，career，用于存储所有职业，供用户选择，包括id，和name;

一个行业表，industry，用于存储行业，包括id，name，和一个存储职业Json字符串的careers。

首先在前台：

添加行业的显示如下：

其网页代码片如下：

	  	<tr>
		    <td  align="right" width="20%">关联职业：</td>
		    <td ><input type="text" id="strCareers" name="strCareers" size="30" selectedValue="$lCareerId"/>	
		    <input id="strCareer" type="hidden"  vId="" vName=""/><!-- 用于存储选择了的某个职业，供Js取 -->
		    <input type="button" value="添加职业" onclick="addCareer()" /></td>	
	  	</tr> 
	  	<tr>
		    <td  align="right" width="20%"></td>
		    <td height="100xp" bgcolor="gray" style="color: white"><div id="showRelevance"></div></td><!-- 用于显示添加的职业DIV -->
		</tr>

对应的Js片如下：

var addCareer= function()//添加职业
{
	var career=document.getElementById("strCareer");//得到职业
	if(career.getAttribute('vId') != "" || career.getAttribute('vName') != "")
	{
		var div = document.createElement("div");//创建div
		div.setAttribute('vId',career.getAttribute('vId'));
		div.setAttribute('vName',career.getAttribute('vName'));
		div.innerText = career.getAttribute('vName');
		document.getElementById("showRelevance").appendChild(div);//追加显示到灰框中
	}
}

var getCareer = function()//得到选取的职业数组
{
	var d = document.getElementById("showRelevance").childNodes;
	var strRelevance = "{relevance:[";//新建代表职业数组relevance的字符串
	var strTemp = "";
	for(i=0;i<d.length;i++)//遍历showRelevance的子元素，得到所有的代表职业的Div
	{
		if(i != 0)
		{
			strTemp = strTemp + ",";
		}
		strTemp =strTemp + "{\"lCareerId\":"+d[i].getAttribute('vId')+",\"strCareerName\":\""+d[i].getAttribute('vName')+"\"}";//拼接数组
	}
	strRelevance =strRelevance + strTemp + "]}";
	return strRelevance;
}

这样，传到后台的数据就是一个Json字符串了，至于存储代码不是本文的重点，所以这里不讨论。

{relevance:[{"lCareerId":3,"strCareerName":"西西"},{"lCareerId":1,"strCareerName":"来来"},{"lCareerId":5,"strCareerName":"丝丝"},{"lCareerId":2,"strCareerName":"支支"}]}

再来说说后台解析数据：

这里我们要的结果是显示出刚刚添加的职业的Name。

效果如下：

代码如下：

	protected String getCareerStr(String jsonStr)
	{
		JSONObject jsonObj = JSONObject.fromObject(jsonStr);//转化成Json对象
		JSONArray ja = jsonObj.getJSONArray("relevance");//得到Json数组
		if (ja == null)
		{
			return "";
		}
		else
		{
			StringBuffer temp = new StringBuffer("");
			boolean isFirst = true;
			for (int i = 0; i < ja.size(); i++)//开始遍历
			{
				if(!isFirst)
				{
					temp.append("、");
				}
				JSONObject jo = ja.getJSONObject(i);
				temp.append(jo.getString("strCareerName"));//追加字符串
				isFirst = false;
			}
			return temp.toString();
		}
	}

然后再说说前台解析数据：

我们要的效果是用,id为职业id,显示为职业name的div,显示出所有的职业，其效果如下：

对应的Js代码如下：

var setCareer = function()
{
	var str = document.getElementById("strRelevance").value; //得到json数组
	var array = eval(str);//解析json数组成js数组,为什么会这么简单捏?因为前面有说,JSON又叫JavaScript Object Notation,是基于JavaScript的一个子集.
	var career=document.getElementById("strCareer");
	for(i=0;i<array.length;i++)//遍历数组
	{
		var r = array[i];
		var div = document.createElement("div");//新建div
		div.setAttribute('vId',array[i].lCareerId);
		div.setAttribute('vName',array[i].strCareerName);
		div.innerText = array[i].strCareerName;
		document.getElementById("showRelevance").appendChild(div);//追加显示的职业div
	}
}

这样整个流程就出来了，因为是公司项目，所以没有将全部代码贴出，但是原理已经出来 了。