JSON小例子

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

fxz_2010

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

阅读量106

点赞数

分类专栏： javascript 文章标签： json JavaScript jQuery prototype Ajax ViewUI

javascript 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一个使用JSON和AJAX进行前后端数据交互的示例，展示了如何通过JavaScript发起POST请求，并从服务器接收并解析JSON响应数据。此外，还提供了服务器端Java代码示例，用于创建和发送JSON响应。

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

<script type="text/javascript" src="${pageContext.request.contextPath }/js/prototype.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.3.2.min.js"></script>
	<script type="text/javascript">
		function testJson() {
			$.ajax({
			   type: "POST",
			   url: "JsonServlet",
			   data: "",
			   success: function(msg){
			      var str = eval("("+msg+")");
			      var arr = str.res ;
			      for(var i=0;i<arr.length;i++){
			      	alert(arr[i].username);
			      }
			   }
			});
		}
	
	</script>

public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		JSONArray res = new JSONArray();
		for(int i=0 ; i<5 ; i++){
			JSONObject obj = new JSONObject();
			try {
				obj.put("userid", "userid"+i);
				obj.put("username", "username"+i);
			} catch (JSONException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
			res.put(obj);
		}
		JSONObject obj = new JSONObject();
		try {
			obj.put("res", res);
		} catch (JSONException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		out.print(obj);
		out.flush();
		out.close();
	}

例二：

<script type="text/javascript" src="${pageContext.request.contextPath }/js/prototype.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.3.2.min.js"></script>
	<script type="text/javascript">
		function testJson() {
			var val = $("#sele").val();
			alert(val);
			
			$.post(
				"JsonServlet",
				{userid:val},
				function(msg){
			      var str = eval("("+msg+")");
			      var arr = str.res ;
			      for(var i=0;i<arr.length;i++){
			      	alert(arr[i].username);
			      }
			   }
			);
			
			 
		}
	
	</script>
	
	
	
  </head>
  
  <body>
    <input type="button" value="測試JSON" onclick="testJson();">
    <select onchange="testJson();" id="sele">
    	<option value="0">用户0</option>
    	<option value="1">用户1</option>
    	<option value="2">用户2</option>
    	<option value="3">用户3</option>
    	<option value="4">用户4</option>
    </select>
  </body>

		JSONObject obj = new JSONObject();
		try {
			obj.put("userid", "userid"+userid);
			obj.put("username", "username"+userid);
		} catch (JSONException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		res.put(obj);
		
		JSONObject obj2 = new JSONObject();
		try {
			obj2.put("res", res);
		} catch (JSONException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		out.print(obj2);
		out.flush();
		out.close();
	}