Json引入键值key&value,数组,嵌套,用户注册
Ajax&Json
JSP页面
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Test Ajax&Json</title> <script type="text/javascript"> function loadJson() { var xmlHttp; if(window.XMLHttpRequest){ xmlHttp=new XMLHttpRequest(); }else{//IE 5,6的支持 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlHttp.onreadystatechange=function(){ if(xmlHttp.readyState==4 && xmlHttp.status==200){ var dataObj=eval("("+xmlHttp.responseText+")"); document.getElementById("name").value=dataObj.name; document.getElementById("age").value=dataObj.age; } }; //post请求 xmlHttp.open("post", "testJson?action=jsonObject", true); xmlHttp.send(); } function loadJson2() { var xmlHttp; if(window.XMLHttpRequest){ xmlHttp=new XMLHttpRequest(); }else{//IE 5,6的支持 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlHttp.onreadystatechange=function(){ if(xmlHttp.readyState==4 && xmlHttp.status==200){ alert(xmlHttp.responseText); var dataObj=eval("("+xmlHttp.responseText+")"); var em=document.getElementById("emp"); var newTr; var newTd0; var newTd1; for(var i=0;i<dataObj.emp.length;i++){ var emp=dataObj.emp[i]; newTr=em.insertRow(); newTd0=newTr.insertCell(); newTd1=newTr.insertCell(); newTd0.innerHTML=emp.name; newTd1.innerHTML=emp.job; } } }; xmlHttp.open("get", "testJson?action=jsonArray", true); xmlHttp.send(); } </script> </head> <body> <div> <button onclick="loadJson()">测试Json</button> 姓名:<input type="text" name="name" id="name"> 年龄:<input type="text" name="age" id="age"> </div> <br><br> <div> <button onclick="loadJson2()">测试Json2</button> <table id="emp"> <tr> <th>姓名</th> <th>年龄</th> </tr> </table> </div> </body> </html>
请求的Servlet代码
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doPost(req, resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { resp.setContentType("text/html;charset=utf-8"); String action=req.getParameter("action"); if("jsonObject".equals(action)){ getJSONObject(req,resp); }else if("jsonArray".equals(action)){ getJSONArray(req,resp); } } private void getJSONObject(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { PrintWriter out =resp.getWriter(); //String str="{\"name\":\"Anner\",\"age\":24}"; JSONObject j=new JSONObject(); j.put("name", "Anner"); j.put("age", 26); out.println(j); out.flush(); out.close(); } private void getJSONArray(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { PrintWriter out =resp.getWriter(); JSONArray js=new JSONArray(); JSONObject j1=new JSONObject(); j1.put("name", "Allen");j1.put("job", "办事员"); JSONObject j2=new JSONObject(); j2.put("name", "Smith");j2.put("job", "销售员"); JSONObject j3=new JSONObject(); j3.put("name", "James");j3.put("job", "技术员"); js.add(j1);js.add(j2);js.add(j3); JSONObject resultJson=new JSONObject(); resultJson.put("emp", js); out.println(resultJson); out.flush(); out.close(); }
Json可以进行无线嵌套,
嵌套示例:
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Test Ajax&Json</title> <script type="text/javascript"> function loadJson() { var xmlHttp; if(window.XMLHttpRequest){ xmlHttp=new XMLHttpRequest(); }else{//IE 5,6的支持 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlHttp.onreadystatechange=function(){ if(xmlHttp.readyState==4 && xmlHttp.status==200){ var dataObj=eval("("+xmlHttp.responseText+")"); var lol=document.getElementById("lol"); var newTr; // 行 var newTd0; // 第一列 var newTd1; // 第二列 var newTd2; // 第三列 for(var i=0;i<dataObj.emp.length;i++){ var e=dataObj.emp[i]; newTr=lol.insertRow(); newTd0=newTr.insertCell(); newTd1=newTr.insertCell(); newTd2=newTr.insertCell(); newTd0.innerHTML=e.name; newTd1.innerHTML=e.job; newTd2.innerHTML="loc1:"+e.loc.loc1+",loc2:"+e.loc.loc2+",loc3:"+e.loc.loc3; } } }; xmlHttp.open("get","testJson?action=testJsonNested",true); xmlHttp.send(); } </script> </head> <body> <div> <button onclick="loadJson()">测试Json2</button> <table id="lol"> <th>姓名</th> <th>职业</th> <th>位置</th> </table> </div> </body> </html>
请求的Servlet代码
PrintWriter out=resp.getWriter(); JSONObject j1=new JSONObject(); j1.put("name", "无双剑姬");j1.put("job", "刺客"); JSONObject jLoc1=new JSONObject(); jLoc1.put("loc1", "上单"); jLoc1.put("loc2", "中单"); jLoc1.put("loc3", "辅佐"); j1.put("loc", jLoc1); JSONObject j2=new JSONObject(); j2.put("name", "卡特");j2.put("job", "AP刺客"); JSONObject jLoc2=new JSONObject(); jLoc2.put("loc1", "中单"); jLoc2.put("loc2", "射手"); jLoc2.put("loc3", "打野"); j2.put("loc", jLoc2); JSONObject j3=new JSONObject(); j3.put("name", "疾风剑豪");j3.put("job", "AD刺客"); JSONObject jLoc3=new JSONObject(); jLoc3.put("loc1", "中单"); jLoc3.put("loc2", "辅佐"); jLoc3.put("loc3", "打野"); j3.put("loc", jLoc3); JSONArray ja=new JSONArray(); ja.add(j1);ja.add(j2);ja.add(j3); JSONObject resultJson=new JSONObject(); resultJson.put("emp", ja); out.println(resultJson); out.flush(); out.close();
用户注册功能的实现(异步)
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Test Ajax&Json</title> <script type="text/javascript"> function checkRegName() { var xmlHttp; if(window.XMLHttpRequest){ xmlHttp=new XMLHttpRequest(); }else{//IE 5,6的支持 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } var registerName=document.getElementById("registerName").value; xmlHttp.onreadystatechange=function(){ if(xmlHttp.readyState==4 && xmlHttp.status==200){ //alert(xmlHttp.responseText); var dataObj=eval("("+xmlHttp.responseText+")"); var tip=document.getElementById("tip"); if(dataObj.exist){ tip.innerHTML="<img src='images/no.png' />"; }else{ tip.innerHTML="<img src='images/ok.png' />"; } } }; xmlHttp.open("get","register?action=chkName®Name="+registerName,true); xmlHttp.send(); } </script> </head> <body> <table> <th>用户注册</th> <tr> <td>用户名</td> <td> <input type="text" name="registerName" id="registerName" onblur="checkRegName()"> <span id="tip"></span> </td> </tr> <tr> <td>密码</td> <td><input type="password" name="password" id="password" ></td> </tr> <tr> <td>确认密码</td> <td><input type="password" name="password2" id="password2" ></td> </tr> </table> </body> </html>
后台代码
@Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String action=req.getParameter("action"); String regName=req.getParameter("regName"); PrintWriter out=resp.getWriter(); if("chkName".equals(action)){ JSONObject jo=new JSONObject(); if("Allen".equals(regName)){//模拟数据库提取数据 jo.put("exist", true); }else{ jo.put("exist", false); } out.println(jo); } out.flush();out.close(); }