jquery ajax 前后端通信传值（select 级联

好久没有写前端的东西了，原来的东西都忘了。从网上查了查资料，功能还是做出来了，总结一下吧。没准以后又忘了。

目标：两个select级联,第二个option根据数据库里的值添加

html（写个大概的意思，不一定能直接用)

<select id="type">
	<option value="1">音频</option>
	<option value="2">视频</option>
	<option value="3">图片</option>
</select>
<select id="sets"></select>

js（写个大概的意思，不一定能直接用）

<script language="JavaScript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function(){
		 getSets();
		 $("#type").change(function() {
			 getSets();
		 }); 
	})
			
	function getSets(){
		$("#sets").empty();/清空上次的数据
		$.ajax({ 
			url: "XXXXAction_getSetsByType.aspx",
			//说是解决的中文值乱码的，我试了一下失败了，不传中文的value了，本来我觉得值是中文也不好。小项目不是很规范 ：）
			contentType:"application/x-www-form-urlencoded; charset=UTF-8",
			datatype:"json",
			data:{type:$("#type").find("option:selected").val()},
			success: function(data){
				var dataObj=eval("("+data+")");//解析json
				if(dataObj.flag){for(var i=0;i<dataObj.list.length;i++){
					$("#sets").append("<option value="+dataObj.list[i].value+">"+dataObj.list[i].name+"</option>"); 
				}}        
			}}
		);
	}
</script>

java（写个大概的意思，不一定能直接用）

public void getSetsByType(){
	Map<String,Object> map = new HashMap<String, Object>();
	try {	
		map.put("flag",true);
		map.put("msg", "查找类型成功");
		map.put("list",xxxxService.getSetsByType(type));
	} catch (Exception e) {
		map.put("flag", false);
		map.put("msg", "查找类型失败");
		e.printStackTrace();
	}
	JSONObject jsonObject = new JSONObject(map);
	response.getOutputStream().write(jsonObject.toString().getBytes());
}

参考：

解决乱码问题：http://www.jb51.net/article/31791.htm