zoukankan      html  css  js  c++  java

  • 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&regName="+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();
	}

    　　
  • 相关阅读:
    flash 中无法导出swf文件的解决方法
    codeforces 341C Iahub and Permutations(组合数dp)
    CSS里的 no-repeat 是什么意思
    linux enable命令学习
    config large memory
    java中集合杂记
    Linux操作系统以及各大发行版介绍——Linux operating system and major distribution is introduced
    KVM几种缓存模式
    Elastic-Job
    日交易额百亿级交易系统的超轻量日志实现
  • 原文地址：https://www.cnblogs.com/void-m/p/6345598.html
Copyright © 2011-2022 走看看