五个基础 JSON范例。
<script type="text/javascript"> //json格式,这是只有一个人。 var people = {firstname:"zhang1",lastname:"xxxx1",email:"kengni@125.com"}; alert(people.email); </script> <script type="text/javascript"> //如果有多个人是并列的,就相于一个数组,里面有多个人。 var people = [ {firstname:"zhang1",lastname:"xxxx1",email:"kengni@125.com"}, {firstname:"zhang2",lastname:"xxxx2",email:"kengni@126.com"} ]; alert(people[1].lastname); </script> <script type="text/javascript"> //如果有多个人是并列的,就相于一个数组,里面有多个人。其实都是key和value. //这个其实就是key就一个普通的key,而value不过是一个数组。 var people = {param1:[ {firstname:"zhang1",lastname:"xxxx1",email:"kengni.com1"}, {firstname:"zhang2",lastname:"xxxx2",email:"kengni.com2"} ]}; alert(people.param1[1].lastname); </script> <script type="text/javascript"> //就是一个数组。 var people = [ {"param1":[{firstname:"zhang11",lastname:"xxxx11",email:"kengni11.com"}, {firstname:"zhang12",lastname:"xxxx12",email:"kengni12.com"}]}, {"params2":[ {firstname:"zhang21",lastname:"xxxx21",email:"kengni21.com"}, {firstname:"zhang22",lastname:"xxxx22",email:"kengni22.com"} ]}, {"params3":[ {firstname:"zhang31",lastname:"xxxx31",email:"kengni31.com"}, {firstname:"zhang32",lastname:"xxxx32",email:"kengni32.com"} ]} ]; alert(people[2].params3[0].lastname); </script> <script type="text/javascript"> //最普通的一个json格式 ,里面就像有复合的东西 。 var people = { username:"zhang", age:20, info:{phone:"12123213",tel:"659999"}, address:[ {homeAddress:"北京",homeCode:12345778}, {companyAddress:"河北",companyCode:1300000}, ] }; alert(people.info.tel); alert(people.address[1].companyCode); </script>
JSON实现三级联动:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>json01.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <script type="text/javascript"> function ajaxFunction(){ var xmlHttp; try{ // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e){ try{// Internet Explorer xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){} } } return xmlHttp; } window.onload=function(){ var xmlRequest=ajaxFunction(); xmlRequest.onreadystatechange=function(){ if(xmlRequest.readyState==4){ if(xmlRequest.status==200||xmlRequest.status==304){ var sdata=xmlRequest.responseText; alert(sdata); //函数 eval 会把一个字符串当作它的参数。然后这个字符串会被当作 JavaScript 代码来执行 var sDataObj=eval("("+sdata+")"); alert("sDataObj "+sDataObj); for(var i=0;i<sDataObj.length;i++){ var province = document.getElementById("province"); var optionElment = document.createElement("option"); optionElment.setAttribute("value", sDataObj[i].pname); var textElement = document.createTextNode(sDataObj[i].pname); optionElment.appendChild(textElement); province.appendChild(optionElment); } } } } xmlRequest.open("post","../jsonServlet?timeStamp="+new Date().getTime(),true); xmlRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlRequest.send(null); } </script> <body> <select id="province" name="province"> <option value="">请选择....</option> </select> <select id="city" name="city"> <option value="">请选择.....</option> </select> </body> </html>package cn.ajax; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.sun.org.apache.bcel.internal.generic.ISTORE; import net.sf.json.JSONArray; import cn.bean.Province; public class JsonServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); PrintWriter out=response.getWriter(); //模拟数据库 Province p1=new Province(1,"吉林省"); Province p2=new Province(2,"辽宁省"); Province p3=new Province(3,"山东省"); List<Province> list=new ArrayList(); list.add(p1); list.add(p2); list.add(p3); //在实际项目中有没有和一种工具直接可以把集合转换成json格式的数据。 JSONArray jsonArray = JSONArray.fromObject(list); System.out.println(jsonArray.toString()); //回到客户端 out.println(jsonArray.toString()); } }
package cn.bean; public class Province { public Province() { } public Province(Integer pid, String pname) { this.pid = pid; this.pname = pname; } private Integer pid; private String pname; public Integer getPid() { return pid; } public void setPid(Integer pid) { this.pid = pid; } public String getPname() { return pname; } public void setPname(String pname) { this.pname = pname; } }