Json引入鍵值key&value,數組,嵌套,用戶註冊

時間  2019-11-09
標籤 json 引入 鍵值 key&value key value 數組 嵌套 用戶 註冊 欄目 JavaScript 简体版
原文   原文鏈接

Ajax&Jsonjavascript

JSP頁面html

<%@ 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代碼java

	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能夠進行無線嵌套，數據庫

　　嵌套示例：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();

　　

用戶註冊功能的實現（異步）ide

<%@ 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>

　　後臺代碼post

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

　　

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程