Json引入键值key&value,数组,嵌套,用户注册

最新推荐文章于 2025-08-15 22:56:20 发布

转载最新推荐文章于 2025-08-15 22:56:20 发布 · 95 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/void-m/p/6345598.html

文章标签：

#json #java #javascript #ViewUI

本文介绍了一个使用Ajax与JSON实现的用户注册功能示例，包括异步检查用户名是否存在、通过Ajax获取JSON数据并解析显示等核心功能。展示了如何利用JSP页面、JavaScript与Servlet交互来完成这些任务。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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();
	}