json的基础笔记-实现城市下拉菜单联动

nwpu_geeker

于 2017-11-16 10:27:09 发布

阅读量1.8k

点赞数

分类专栏： json学习笔记文章标签： json javascript

本文链接：https://blog.csdn.net/nwpu_geeker/article/details/78548129

版权

json学习笔记专栏收录该内容

0 篇文章 0 订阅

订阅专栏

一、什么是json?

Json（Java Script Object Notation（记号,标记））是一种AJAX和服务器进行轻量级数据交互的技术。json本质上就是用js编写的一种具有特殊格式的文本字符串。

二、为什么用json?好处是？

使用json可以简化js创建对象的方式。能够作为载体之一和xml一样，传递客户端与服务器之间的交互数据。

三、在哪里用到json?

创建js对象的时候，简化了书写。可以作为客户端与服务器传递数据。

四、如何使用json?

首先用json语法来创建对象,其中对象的属性可以是string，number,boolean,对象，数组，函数等。

例如：

创建简单对象：
<script type="text/javascript">
       var p={
       id:1,
       name:"hah",
       sal:1500
       }
      document.write("编号："+p.id+"<br/>");
      document.write("姓名："+p.name+"<br/>");
      document.write("薪水："+p.sal+"<br/>");
 </script>

创建数组对象：
<script type="text/javascript">
      var ps=[
      {id:1,
       name:"hah"
      },
      {id:2,
       name:"xixi"
      },
      {id:3,
      name:"heh"
      }
      ];
      document.write("共有" + ps.length + "个学生<br/>");
	  for(var i=0;i<ps.length;i++){
			document.write("编号：" + ps[i].id + "<br/>");
			document.write("姓名：" + ps[i].name + "<br/>");
	}
</script>

五、json的简单应用

（1）实现一个城市区的联动框（AJAX+struts2）

js代码如下：
<body>
    <select id="provinceID" name="province">
     <option>选择省份</option>
     <option>山东</option>
     <option>广东</option>
    </select>
    <select id="cityID" name="city">
     <option>选择城市</option>
    </select>
    <select id="areaID" name="area">
     <option>选择区域</option>
    </select>
    
    <!-- 省份->城市联动 -->
    <script type="text/javascript">
       document.getElementById("provinceID").οnchange=function(){
       var cityElement = document.getElementById("cityID");
       cityElement.options.length=1;
       var areaElement =document.getElementById("areaID");
       areaElement.options.length=1;
       var province=this[this.selectedIndex].innerHTML;
	       if("选择省份"!=province){
	          //1
	          var ajax=createAJAX();
	          //2
	          var method="POST";
	          var url="${pageContext.request.contextPath}/provinceRequest?id="+new Date().getTime();
	          ajax.open(method,url);
	          //3
	          ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
	          //4
	          var content="bean.province="+province;
	          ajax.send(content);
	          //--------------------------等待
	          //5
	          ajax.onreadystatechange=function(){
	              if(ajax.readyState==4){
	                  if(ajax.status==200){
	                      var jsonJAVA=ajax.responseText;
	                      //将json 的格式改成js格式的 json
	                      var jsonJS=eval("("+jsonJAVA+")");
	                      var cityList=jsonJS.cityList;
	                      var size=cityList.length;
	                      for(var i=0;i<size;i++){
	                          var city=cityList[i];//遍历城市
	                          var option = document.createElement("option");
	                          option.innerHTML=city;
	                          cityElement.appendChild(option);
	                      }
	                  }
	              }
	          }
	        }
       }
    </script>
    
    <!-- 城市->区域联动 -->
    <script type="text/javascript">
           document.getElementById("cityID").onchange = function(){
           var city=this[this.selectedIndex].innerHTML;
           var areaElement =document.getElementById("areaID");
           areaElement.options.length=1;
           if("选择城市"!=city){
              //1
              var ajax = createAJAX();
              //2
              var method = "POST";
              var url="${pageContext.request.contextPath}/cityRequest.action?id="+new Date().getTime();
              ajax.open(method,url);
              //3
              ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
              //4
              var content = "bean.city="+city;
              ajax.send(content);
              //--------------------------等待服务器响应
              //5 
              ajax.onreadystatechange = function(){
                   if(ajax.readyState==4){
                      if(ajax.status==200){
                         var jsonJAVA=ajax.responseText;
                         //6
                         var jsonJS = eval("("+jsonJAVA+")");
                         //遍历
                         var areas =jsonJS.areaSet;
                         for(var i=0;i<areas.length;i++){
                             var option = document.createElement("option");
                             option.innerHTML = areas[i];
                             areaElement.appendChild(option);
                         }
                      }
                   }
              }
            }
        }
    </script>
  </body>

Action代码如下：
public class ProvinceAction extends ActionSupport {
  //获取省份
	private ProBean bean;

	public ProBean getBean() {
		return bean;
	}

	public void setBean(ProBean bean) {
		this.bean = bean;
	}
	//创建list集合保存城市 自动把集合转换成json
	private List<String> cityList;
	
	public List<String> getCityList() {
		return cityList;
	}
	private Set<String> areaSet;
	public Set<String> getAreaSet() {
		return areaSet;
	}

	/**
	 * 省份-城市联动
	 */
		public String province2city() throws Exception {
			cityList=new ArrayList<String>();
			if("山东".equals(bean.getProvince())){
				cityList.add("济南");
				cityList.add("哈哈");
				cityList.add("青岛");
			}else if("广东".equals(bean.getProvince())){
				cityList.add("广州");
				cityList.add("深圳");
				cityList.add("中山");
			}
			return "success";
		}
		/**
		 * 城市-区域联动
		 */
		public String city2area() throws Exception {
			areaSet = new LinkedHashSet<String>();
			if("济南".equals(bean.getCity())){
				areaSet.add("A1");
				areaSet.add("A2");
				areaSet.add("A3");
			}else if("哈哈".equals(bean.getCity())){
				areaSet.add("哈哈1");
				areaSet.add("哈哈2");
				areaSet.add("哈哈3");
			}else if("青岛".equals(bean.getCity())){
				areaSet.add("青岛1");
				areaSet.add("青岛2");
				areaSet.add("青岛3");
			}
			return "success";
		}
}

配置文件：
<package name="myPackage" extends="json-default">
		<global-results>
			<result name="success" type="json"></result>
		</global-results>
		<!-- 省份-城市 -->
		<action name="provinceRequest" class="action.ProvinceAction"
			method="province2city">
		</action>
		<!-- 城市-区域 -->
		<action name="cityRequest" class="action.ProvinceAction"
			method="city2area">
		</action> </package>

jar：
struts2-json-plugin-2.3.1.1.jar

nwpu_geeker

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
json的基础笔记-实现城市下拉菜单联动

一、什么是json? Json（Java Script Object Notation（记号,标记））是一种AJAX和服务器进行轻量级数据交互的技术。json本质上就是用js编写的一种具有特殊格式的文本字符串。二、为什么用json?好处是？使用json可以简化js创建对象的方式。能够作为载体之一和xml一样，传递客户端与服务器之间的交互数据。三、在哪里用到json?
复制链接

扫一扫

专栏目录