json servlet通信显示数据

最新推荐文章于 2025-09-11 14:12:58 发布

转载最新推荐文章于 2025-09-11 14:12:58 发布 · 59 阅读

文章标签：

#json #java #javascript #ViewUI

本文介绍了一个简单的Servlet示例，该示例展示了如何通过Servlet输出JSON格式的省份信息，并在JSP页面上通过JavaScript实现数据的获取与显示，适用于初学者理解前后端数据交互的基本流程。

servlet

 1 //输出JSON格式的省份信息
 2 @WebServlet("/ServletDemo1")
 3 public class ServletDemo1 extends HttpServlet {
 4     private static final long serialVersionUID = 1L;
 5        
 6    
 7     public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 8         response.setContentType("text/html;charset=UTF-8");
 9         PrintWriter out = response.getWriter();
10         String str = "{name:'山东省'}";
11         out.write(str);
12     }

json jsp中应用

eval函数用于转换成 json的文本 来让以后代码使用

 1 <%@ page language="java"  pageEncoding="utf-8"%>
 2 
 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 4 <html>
 5     <head>
 6         <title>级联菜单</title>
 7         <script type="text/javascript" src="./xmFile.js"> </script>
 8     </head>
 9     <body>
10      <select id="province" name="province">
11        <option value="">请选择....</option>
12      </select>
13      <select id="city" name="city">
14          <option value="">请选择.....</option>
15      </select>
16      <script type="text/javascript">
17          window.onload=function(){
18              var xhr = createXmlHttpRequest();
19              xhr.onreadystatechange=function(){
20                  if(xhr.readyState==4){
21                      if(xhr.status==200||xhr.status==304){
22                          var data = xhr.responseText;//JSON数据，服务端是普通字符串返回的
23                          var provinceJson = eval("("+data+")");//把普通的JSON字符串文本变成真正的JSON数据
24                          
25                          var optionElement = document.createElement("option");
26                          optionElement.setAttribute("value",provinceJson.name);
27                          var textNode = document.createTextNode(provinceJson.name);
28                          optionElement.appendChild(textNode);
29                          
30                          document.getElementById("province").appendChild(optionElement);
31                          
32                      }
33                  }
34              }
35              xhr.open("GET","${pageContext.request.contextPath}/ServletDemo1?time="+new Date().getTime());
36              xhr.send(null);
37          }
38          function createXmlHttpRequest(){
39                var xmlHttp;
40                try{    //Firefox, Opera 8.0+, Safari
41                        xmlHttp=new XMLHttpRequest();
42                 }catch (e){
43                        try{    //Internet Explorer
44                               xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
45                         }catch (e){
46                               try{
47                                       xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
48                               }catch (e){}  
49                        }
50                 }
51                return xmlHttp;
52              }
53      </script>
54   </body>
55 </html>