json

時間 2019-11-08

標籤 json 欄目 JavaScript 简体版

原文原文鏈接

什麼是jsonjavascript

　　概念：html

　　　格式：java

　　　　　　鍵值對：ajax

　　　　　　　對象：sql

　　　　　　　　數組：apache

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實現省市縣三級聯動服務器

　　需求：完成省市縣三級聯動app

　　　注意點：省市縣關係關聯（上級行政區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();
        }
       
    
    }

}

三級聯動後臺邏輯

　　　　　　效果：

1. wcf json asp.net json
2. json JSON詳解
3. JSON 介紹（Introducing JSON）
4. Json解析(Json集合,Json嵌套)
5. java xml轉json json轉xml（json轉map）
6. JavaScript案例，json遍歷、json添加、json修改、json刪除
7. IOS json轉對象 /json 轉 Object / ios json to Object / ios json convert Object
8. JSON
9. Json
10. json
更多相關文章...
• PHP JSON - PHP教程
• R JSON 文件 - R 語言教程
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
• YAML 入門教程

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。