在jsp页面获取后台传来的Json转成List写入select

auleit 2014-10-24 11:36:28
在做一个全国省市区三级联动的选择框，计划通过上一级select的change时间，用ajax返回下一级地区的list。
在这遇到瓶颈了，我该如何解决，求大神们指点。。。
Action
public class AreaAction extends BaseAction{

	private AreaService service = new AreaService();





	public String initialize() throws Exception{

		List proList = service.getPro();	//获取所有省级地区列表

		this.getRequest().setAttribute("proList",proList);

		return "init";

	}

	

	public String CityList() throws Exception{

		String procode = getRequest().getParameter("procode");

		System.out.println("省份编号="+procode);

		List cityList = service.getCity(procode);	//获取所有市级地区列表

		this.setListJson(cityList);

		return SUCCESS;

	}

	

	public String AreaList() throws Exception{

		String citycode = getRequest().getParameter("citycode");

		List areaList = service.getCity(citycode);	//获取所有县级地区列表

		this.setListJson(areaList);

		return SUCCESS;

	}

	



}

xml
<struts>

	<!--初始化省份信息 -->

	<package name="area" namespace="/area" extends="struts-default">

		<action name="areaAction" class="com.krt.area.action.AreaAction">

			<result name="golist" type="redirect">area/areaAction!initialize.do</result>

			<result name="init">/region.jsp</result>

		</action>

	</package>

	

	<!--获取城市地区列表 -->

	<package name="areaAjax" namespace="/areaAjax" extends="json-default">

		<action name="getCity" class="com.krt.area.action.AreaAction" method="CityList">

			<result name="success" type="json">

				<param name="root">listJson</param>

			</result>

		</action>

		

		<action name="getArea" class="com.krt.area.action.AreaAction" method="AreaList">

			<result name="success" type="json">

				<param name="root">listJson</param>

			</result>

		</action>

	</package>

</struts>


jsp页面
 <script type="text/javascript">

	$(document).ready(function(){

	    $("#sel_Province").change(function(){

			$.ajax({

				url: '<%=basePath%>areaAjax/getCity.do',

				data: "procode="+$("#sel_Province").val(),

				type: 'get',

				dataType:'json',

				error: function(data)

				{

					alert("加载json 文件出错！");

				},

				success: function(data)

				{

					alert(data);

				},

			});

	   });

	});

</script>

  </head>

  

  <body>

	    <span>*</span> 省

		<select id="sel_Province" style="width:80px" name="sel_Province">

			<option value="110000" selected="selected">北京市</option> 

			<c:forEach items="${proList}" var="list" varStatus="status">

			 		<option value="${list.code}">${list.name }</option>

			</c:forEach>

		</select>

		<span>*</span> 市

		<select id="sel_City" name="sel_City">

			<c:forEach items="${cityList}" var="list" varStatus="status">

			 		<option value="${list.code}">${list.name }</option>

			</c:forEach>

		</select>

		<span>*</span> 县/区

		<select id="sel_County" name="sel_County">

			<c:forEach items="${areaList}" var="list" varStatus="status">

			 		<option value="${list.code}">${list.name }</option>

			</c:forEach>

		</select>

  </body>

我在success: function(data)里面alert出来是这个样子

就是这里，我接下来该怎么办
...全文
1554 20 打赏 收藏 转发到动态 举报
写回复
用AI写文章
20 条回复
切换为时间正序
请发表友善的回复…
发表回复
baidu_29694899 2016-03-12
  • 打赏
  • 举报
 回复
楼主 问题解决了么？、
fanruixuan 2015-09-01
  • 打赏
  • 举报
 回复
转成dom队像var zone= $("#zone option:selected").text()
chen870201 2014-10-26
  • 打赏
  • 举报
 回复
这个似乎我们也弄过
auleit 2014-10-25
  • 打赏
  • 举报
 回复
引用 10 楼 rui888 的回复:
你浏览器 直接敲

http://xxxxx areaAjax/getCity.do?procode=xxx
看看返回什么？

auleit 2014-10-25
  • 打赏
  • 举报
 回复
终于自己解决了。。。 多谢楼上各位，解决代码如下 
$(document).ready(function(){
	    $("#sel_Province").change(function(){
			$.ajax({
				url: '<%=basePath%>areaAjax/getCity.do',
				data: "procode="+$("#sel_Province").val(),
				type: 'get',
				dataType:'json',
				error: function(data)
				{
					alert("加载json 文件出错！");
				},
				success: function(data)
				{
					//data = $.parseJSON(data);
				    for (var one in data)
				    {
						var name = data[one].name;
						var code = data[one].code;
						//alert(name+code);
						$("#sel_City").append("<option value="+code+">"+name+"</option>");
				    }
				},
			});
	   });
auleit 2014-10-25
  • 打赏
  • 举报
 回复
引用 15 楼 lhxaiee123 的回复:
[quote=引用 14 楼 u010461081 的回复:] 跳出object说明你拿到的是JSON Object对象 你只需要遍历对象 或者.字段拿出东西 然后使用jQuery将数据写入到html元素中就OK了
$(document).ready(function(){
	    $("#sel_Province").change(function(){
			$.ajax({
				url: '<%=basePath%>areaAjax/getCity.do',
				data: "procode="+$("#sel_Province").val(),
				type: 'get',
				dataType:'json',
				error: function(data)
				{
					alert("加载json 文件出错！");
				},
				success: function(data)
				{
					data = $.parseJSON(data);
					var str = "";
				    for (var one in data)
				    {
						var name = data[one].name; //属性1
						var code = data[one].code;  //属性2
						$("#sel_City").html(); 
				    }
				},
			});
	   });
	});
我感觉好像是这样没错，我现在循环出那个jsonlist需要取出这两个属性填充入id="sel_City"的这个select里面，我html()方法应该怎么写呢？之前没接触过，请指教[/quote]要达到这样的效果<option value="code">name</option>
auleit 2014-10-25
  • 打赏
  • 举报
 回复
引用 14 楼 u010461081 的回复:
跳出object说明你拿到的是JSON Object对象 你只需要遍历对象 或者.字段拿出东西 然后使用jQuery将数据写入到html元素中就OK了
$(document).ready(function(){
	    $("#sel_Province").change(function(){
			$.ajax({
				url: '<%=basePath%>areaAjax/getCity.do',
				data: "procode="+$("#sel_Province").val(),
				type: 'get',
				dataType:'json',
				error: function(data)
				{
					alert("加载json 文件出错！");
				},
				success: function(data)
				{
					data = $.parseJSON(data);
					var str = "";
				    for (var one in data)
				    {
						var name = data[one].name; //属性1
						var code = data[one].code;  //属性2
						$("#sel_City").html(); 
				    }
				},
			});
	   });
	});
我感觉好像是这样没错，我现在循环出那个jsonlist需要取出这两个属性填充入id="sel_City"的这个select里面，我html()方法应该怎么写呢？之前没接触过，请指教
_会溺水的猪_ 2014-10-25
  • 打赏
  • 举报
 回复
跳出object说明你拿到的是JSON Object对象 你只需要遍历对象 或者.字段拿出东西 然后使用jQuery将数据写入到html元素中就OK了
auleit 2014-10-24
  • 打赏
  • 举报
 回复
引用 1 楼 rui888 的回复:
你浏览器F12你debug 看看。object 里面
我debug找不到object
auleit 2014-10-24
  • 打赏
  • 举报
 回复
引用 2 楼 sc6231565 的回复:
遍历json 然后添加html元素 JSON.stringify(data);
能写下具体方法吗？我这个ajax得到的list要写入市级select里面
Magical茏 2014-10-24
  • 打赏
  • 举报
 回复
遍历json 然后添加html元素 JSON.stringify(data);
tony4geek 2014-10-24
  • 打赏
  • 举报
 回复
你浏览器F12你debug 看看。object 里面
scmod 2014-10-24
  • 打赏
  • 举报
 回复
这样直接用标签是出不来的吧? 页面载入完的时候是没数据的 ajax返回结果一般是用循环拼接出来option
wxdawxq 2014-10-24
  • 打赏
  • 举报
 回复
for(i=1; i<data.size(); i++){ $('#id').html(data[i].你要输出的字段名); }
tony4geek 2014-10-24
  • 打赏
  • 举报
 回复
你浏览器 直接敲 http://xxxxx areaAjax/getCity.do?procode=xxx 看看返回什么？
auleit 2014-10-24
  • 打赏
  • 举报
 回复
引用 7 楼 rui888 的回复:
参考
恕小弟愚钝，试了一下午也没弄懂 能帮忙写一下方法吗，还需要哪部分的代码请说
xieyunyuwoxin 2014-10-24
  • 打赏
  • 举报
 回复
这里使用的不是data 而是data.data
tony4geek 2014-10-24
  • 打赏
  • 举报
 回复
参考
auleit 2014-10-24
  • 打赏
  • 举报
 回复
引用 5 楼 rui888 的回复:
不就是你弹出来的object///////
success: function(data)

谷歌审查的
IE看不到。。。
tony4geek 2014-10-24
  • 打赏
  • 举报
 回复
不就是你弹出来的object/////// success: function(data)
jsp获取微信公众号网页授权和用户信息（code、access_token、openid等）
讲解用户在微信客户端中访问第三方网页，公众号可以通过微信网页授权机制，来获取用户基本信息，进而实现业务逻辑。 获取code、access_token、openid、用户昵称、地区、性别、头像等 官方文档 ...
java 传json到前台_利用JSON进行前台和后端的数据传输
首先，JSON有两种结构：1)数组结构[{key1:value1,key2:value2},{key3:value3,key4:value4}]2)对象结构{key1:value1,key2:value2,...}主要的操作步骤如下：1)将查询的条件从前端传以一定的方式传递到后台。2)后台根据...
jQuery（Ajax+json前后台数据交互）
Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象 和xml文档，同样也可以将json、xml转换成Java对象 核心代码： ObjectMapper mapper = new ObjectMapper(); mapper....
jsp+ajax+json练习（表单数据检测）
代码】jsp+ajax+json练习（表单数据检测）
转JSON数据的基本使用
它基于（EuropeanComputerManufacturersAssociation,欧洲计算机协会制定的js规范）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得JSON成为理想的数据交换语言。易于人...
Java EE

67,512

社区成员

225,881

社区内容

发帖
与我相关
我的任务
社区描述
J2EE只是Java企业应用。我们需要一个跨J2SE/WEB/EJB的微容器，保护我们的业务核心组件（中间件），以延续它的生命力，而不是依赖J2SE/J2EE版本。
社区管理员
  • Java EE
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章