json

什么是json

　　概念：

　　　　

　　　　

　　　格式：

　　　　　　键值对：

　　　　　　　　　　

　　　　　　　对象：

　　　　　　　　　　  

　　　　　　　　数组：

　　　　　　　　　　  

 

 

 

 json文本转对象

　　

　　　　示例：

　　　　　　

　　　　　　　　 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    

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

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript">
    //操作json对象

    function test1() {
        //定义一个json格式的字符串
        var text = '{"firstName":"John", "lastName":"Doe"}';
        //将json格式的字符串，转换成javascript对象
        var obj = JSON.parse(text);
        alert(obj.firstName);
        alert(obj.lastName);
    }
    //test1();

    //操作json数组
    function test2() {
        //定义一个json格式的字符串
        var text = '{ "employees" : ['
                + '{ "firstName":"John" , "lastName":"Doe" },'
                + '{ "firstName":"Anna" , "lastName":"Smith" },'
                + '{ "firstName":"Peter" , "lastName":"Jones" } ]}';
        //将json格式的字符串，转换成javascript对象
        var obj = JSON.parse(text);
        alert(obj.employees[0].firstName);
        alert(obj.employees[1].firstName);
        alert(obj.employees[2].firstName);
    }
    test2();
</script>
</head>

<body>

</body>
</html>
js中文本转json对象

使用原始Ajax和json实现省市县三级联动

　　需求：完成省市县三级联动

　　　　　　

　　　注意点：省市县关系关联（上级行政区id为下级行政区的parenetId）

　　　　　　　点击上级区域后利用ajax自动加载所有下级区域

　　　资源：

　　　　　　　

 

　　　思路：

　　　　　　　

 

　　　代码实现：

　　　　　　　页面：

　　　　　　　　　　

　　　　　　　　　　 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="root" value="${pageContext.request.contextPath }"/>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>省市页面</title>
<script type="text/javascript">
    //获取ajax核心对象
    function getXHR(){
    
        var xmlhttp;
        if (window.XMLHttpRequest){
        // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }else{
            // code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xmlhttp;
    }
    //第一步：完成省一级地区数据的加载
    
    window.onload = function(){
    
        //发送ajax请求，给服务器
        var xhr = getXHR();
        xhr.open("get","${root}/getData?parentid=0",true);
        xhr.send();
        
        xhr.onreadystatechange = function(){
        
            if(xhr.readyState == 4 && xhr.status == 200){
                var data = xhr.responseText;
                //将json格式字符串，转换成js对象
                var arr = JSON.parse(data);
                var _province = document.getElementById("province");
                //遍历循环数组，将数据添加到省一级地区的select标签中去
                for ( var i = 0; i < arr.length; i++) {
                    //不断的创建option标签
                    var _option = document.createElement("option");
                    //设置当前地区的代号
                    _option.value =  arr[i].codeid;
                    _option.innerHTML = arr[i].cityName;
                    _province.appendChild(_option);
                }
            }
        };
    };

    //第二步：选择省的时候，出现对应的市
    function _getCity(_this){
        //获取市的数据的时候，将原来的数据清空
        var _city = document.getElementById("city");
        _city.length = 1;
        var _area = document.getElementById("area");
        _area.length = 1;
        var xhr = getXHR();
        xhr.open("get","${root}/getData?parentid="+_this.value,true);
        xhr.send();
        
        xhr.onreadystatechange = function(){
        
            if(xhr.readyState == 4 && xhr.status == 200){
                var data = xhr.responseText;
                //将json格式字符串，转换成js对象
                var arr = JSON.parse(data);
                
                //遍历循环数组，将数据添加到省一级地区的select标签中去
                for ( var i = 0; i < arr.length; i++) {
                    //不断的创建option标签
                    var _option = document.createElement("option");
                    //设置当前地区的代号
                    _option.value =  arr[i].codeid;
                    _option.innerHTML = arr[i].cityName;
                    _city.appendChild(_option);
                }
            }
        };
    }
    //第三步：选择市的时候，出现对应的县
    function _getArea(_this){
        //获取县的数据的时候，将原来的数据清空
        var _area = document.getElementById("area");
        _area.length = 1;
        var xhr = getXHR();
        xhr.open("get","${root}/getData?parentid="+_this.value,true);
        xhr.send();
        
        xhr.onreadystatechange = function(){
        
            if(xhr.readyState == 4 && xhr.status == 200){
                var data = xhr.responseText;
                //将json格式字符串，转换成js对象
                var arr = JSON.parse(data);
                
                //遍历循环数组，将数据添加到省一级地区的select标签中去
                for ( var i = 0; i < arr.length; i++) {
                    //不断的创建option标签
                    var _option = document.createElement("option");
                    //设置当前地区的代号
                    _option.value =  arr[i].codeid;
                    _option.innerHTML = arr[i].cityName;
                    _area.appendChild(_option);
                }
            }
        };
    }
</script>
    
 </head>
  
  <body>
    <center>
        <select id="province" name="province" onchange="_getCity(this);">
          <option value="none">--请选择省--</option>
        </select>
        <select id="city" name="city" onchange="_getArea(this);">
            <option value="none">--请选择市--</option>
        </select>
        <select id="area" name="area" >
            <option value="none">--请选择县或区--</option>
        </select>
    </center>
  </body>
</html>
三级联动页面代码

　　　　　　　后台：

　　　　　　　　　

　　　　　　　　　　 
package com.learn.json;

import java.io.IOException;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.ArrayListHandler;
import org.apache.commons.dbutils.handlers.BeanListHandler;

import com.learn.entity.ProvinceEntity;
import com.learn.util.JDBCUtils;

import flexjson.JSONSerializer;



public class Province extends HttpServlet {
    private static final long serialVersionUID = 1L;
    QueryRunner runner = new QueryRunner(JDBCUtils.getDataSource());



    
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String parentId  = request.getParameter("parentId");
        System.out.println("parentId : "+parentId);
        List<ProvinceEntity> dataList=getData(parentId);
        JSONSerializer serializer = new JSONSerializer();
        String serialize = serializer.serialize(dataList);
        System.out.println(serialize);
        response.setContentType("text/html; charset=utf-8");
        response.getWriter().write(serialize);
    }


    private List<ProvinceEntity> getData(String id) {

        String sql4 ="select * from province where parentid=?";
        List<ProvinceEntity> list=null;
        try {
            list = runner.query(sql4, new BeanListHandler<ProvinceEntity>(ProvinceEntity.class),id);
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return list;
       
    }


    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
    
    public static void main(String[] args) {
        QueryRunner runner = new QueryRunner(JDBCUtils.getDataSource());

        String sql4 ="select * from province where parentid=?";
        List<ProvinceEntity> list=null;
        try {
            list = runner.query(sql4, new BeanListHandler<ProvinceEntity>(ProvinceEntity.class),0);
            for (ProvinceEntity province : list) {
                System.out.println(province.getCityName());
            }
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
       
    
    }

}
三级联动后台逻辑

 

　　　　　　　　　

　　　　　　效果：

　　　　　　　　　  

 

 

　　　　　　

 

posted @ 2018-09-24 21:16  znlsmd123  阅读(231)  评论(0)    收藏  举报