`
herryhaixiao
  • 浏览: 90452 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

仿JSON做的数据传输

    博客分类:
  • java
阅读更多
仿JSON做的数据传输。后台生成一个JSON数组,前台负责解析数组,然后展示。把后台的List截断成一个JSON的数组,然后通过reponse返回至页面,页面再解析此JSON数组然后在展示此数据。具体操作:

1。写一个javaBean,在bean里面写一个toJSON(),封装属性名和值然后用String方式返回;

2。写一个servlet,   在其中写一个得到list的一个结果集;

3。写个HTML页面,由Ajax的方式异步提交到Servlet中,然后返回Servlet中的值,再在页面上用Ajax的xmlHttp得到json数组然后通过eval()解析,然后拼装到页面展示.

具体代码如下:

javaBean:

package com.haixiao.bean;

public class User {
  private Long userId;
  private String userName;
  private String firstName;
   private String middleName;
  private String address;
   public User() {
 
   }

  public Long getUserId() {
      return userId;
  }

  public void setUserId(Long userId) {
     this.userId = userId;
   }

  public String getUserName() {
    return userName;
   }

  public void setUserName(String userName) {
     this.userName = userName;
  }

   public String getFirstName() {
     return firstName;
  }

  public void setFirstName(String firstName) {
      this.firstName = firstName;
   }

  public String getMiddleName() {
      return middleName;
  }

  public void setMiddleName(String middleName) {
      this.middleName = middleName;
  }

   public String getAddress() {
     return address;
  }

  public void setAddress(String address) {
     this.address = address;
   }

  public String toJSON() {
       String json = "{'userId':'"+this.getUserId() + "','userName':'"
           + this.getUserName() + "','firstName':'"
            + this.getFirstName() +"','middleName':'" + this.getMiddleName()
           +"','address':'" + this.getAddress() + "'}";
     return json;
   }
}




前台页面示例:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <META content="text/html; charset=gb2312" http-equiv=Content-Type>
  <title>Example</title>
</head>
<script type="text/javascript">
    var xmlHttp;
    function createXMLHttpRequest() {
      if (window.ActiveXObject) {
         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      } else if (window.XMLHttpRequest) {
          xmlHttp = new XMLHttpRequest();
       }
    }
 
   function handleStateChange() {
      if(xmlHttp.readyState == 4) {
          if(xmlHttp.status == 200) {
             parseResults();
          }
       }
   }
 
    function parseResults() {
       var json = xmlHttp.responseText;
       eval("var resq = " + json );
       var jsonUser = resq.user;
       var outText = "<table border=1><tr><td>用户ID</td><td>用户姓名</td><td>用户姓氏          </td><td>用户中间名</td><td>用户地址</td></tr>";
       for(var i = 0 ; i < jsonUser.length;i++){
          var val = eval(jsonUser[i]);
          outText += "<tr><td>"+val.userId+"</td>" +
        "<td>"+val.userName+"</td>" +
                 "<td>"+val.firstName+"</td>" +
                 "<td>"+val.middleName+"</td>" +
              "<td>"+val.address+"</td></tr>";
       }
       outText += "</table>";
       serverResponse.innerHTML=outText;
   }
 
    function getListData() {
       createXMLHttpRequest();
       var url = "JsonExample?timeStamp="+new Date().getTime();
       xmlHttp.open("GET", url, true);
      xmlHttp.onreadystatechange = handleStateChange;
       xmlHttp.send(null);
   }
</script>
<body>
   <br/><br/>
     <form action="#">
         <input type="button" value="list集合" onclick="getListData();" />
      </form>
    <br>
    <h2>集合列表:</h2>
    <div id="serverResponse"></div>
</body>
</html>



servlet:



package ajax.communicate;

import java.io.BufferedReader;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.haixiao.bean.User;

public class JsonExample extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet   {
     static final long serialVersionUID = 1L;
  
  public JsonExample() {
     super();
   }   

   /**
    * 得到一个List集合,里面包含一个用户对象。通过循环把list拼装成一个String然后打出到  页面
    */
   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws     ServletException, IOException {
      List<User> list = new ArrayList<User>();
      User user1 = new User();
      user1.setUserId(1L);
      user1.setUserName("小王");
      user1.setFirstName("王");
      user1.setMiddleName("猛");
     user1.setAddress("上海市");
      User user2 = new User();
      user2.setUserId(2L);
      user2.setUserName("小黑");
      user2.setFirstName("黑");
      user2.setMiddleName("楠");
      user2.setAddress("不详");
      User user3 = new User();
      user3.setUserId(3L);
      user3.setUserName("小刘");
     user3.setFirstName("刘");
     user3.setMiddleName("大伊");
     user3.setAddress("北京");
      list.add(user1);
      list.add(user2);
      list.add(user3);
      String json = "{user:[" ;
      for(int i = 0 ; i < list.size();i++) {
         json += list.get(i).toJSON();
         if(i != list.size()-1){
            json = json + ",";
         }
      }
      json += "]}";
      response.setContentType("text/xml");
      response.setCharacterEncoding("gb2312");
      response.getWriter().println(json);
   }  

   protected void doPost(HttpServletRequest request, HttpServletResponse response) throws     ServletException, IOException {
     this.doGet(request, response);
   }          
}

web.xml:

<servlet>
   <description>
    </description>
    <display-name>
     JsonExample

  </display-name>
    <servlet-name>JsonExample</servlet-name>
    <servlet-class>
     ajax.communicate.JsonExample

  </servlet-class>
</servlet>

<servlet-mapping>
   <servlet-name>JsonExample</servlet-name>
    <url-pattern>/JsonExample</url-pattern>
</servlet-mapping>
0
0
分享到:
评论

相关推荐

    Android Json数据的解析+ListView图文混排+缓存算法Lrucache 仿知乎

    本项目聚焦于Android中的JSON数据解析、ListView图文混排以及缓存策略LRUCache,这些都是实现高效、流畅用户体验的关键技术。 首先,JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,广泛用于...

    ajax+json仿照google提示

    由于JSON是JavaScript的一个子集,它在Web开发中的使用尤为广泛,特别是在Ajax请求中作为数据传输的载体,因为JSON数据可以直接被JavaScript对象表示和处理,无需额外的解析步骤。 在"ajax+json仿照google提示"项目...

    json补全js和样式

    在本项目中,"仿搜索引擎的补全技术"意味着前端输入框将模拟搜索引擎的行为,当用户在输入框中键入文字时,系统会实时发送请求到后台,后台根据输入内容进行匹配查询,然后返回匹配结果的JSON数据。 实现这个功能的...

    仿google搜索下拉层框ajax+json+php 实现

    JavaScript客户端接收到这个JSON数据后,可以方便地将其转化为JavaScript对象,并显示在下拉层框中。 **PHP** 是一种服务端脚本语言,广泛用于Web开发。在这里,PHP用于接收前端Ajax发送的请求,处理请求中的搜索...

    仿百度,谷歌输入框自动提示功能---JSON版

    通过以上分析,我们可以看出实现一个类似百度、谷歌的自动提示功能不仅需要熟练掌握前端技术如jQuery,还需要了解JSON数据格式以及如何高效地进行前后端数据交换。此外,良好的用户体验也是不可忽视的一环,包括合理...

    基于JSON+JQuery实现的多条件筛选功能(类似京东和淘宝功能)

    4. Ajax交互:通过`.ajax()`或`.getJSON()`方法,jQuery能实现异步数据请求,当用户选择新的筛选条件时,向服务器发送JSON数据,获取更新后的产品列表,而无需刷新整个页面,提高了用户体验。 5. 数据处理:接收到...

    基于Android平台的仿熊猫影音网络播放器(客户端、服务器端、Servlet、JDBC、MSSQL、JSON技术)

    在客户端-服务器通信中,JSON常用来传输对象数据,如用户信息、媒体资源信息等。 综上所述,此项目综合运用了Android应用开发、多媒体处理、网络通信、服务器端编程、数据库管理和数据交换格式等多种技术,构建了一...

    php加载和生成json和生成xml文件,并带有ajax分页效果,带图带数据库

    JSON因其简洁明了的语法和易于解析,常用于Web服务中的数据传输。XML则提供了更复杂的结构,适合存储和交换结构化数据。在PHP中,可以使用`json_encode()`和`json_decode()`处理JSON数据,而`DOMDocument`类和`...

    仿钉钉流程开发,可以用于企业oa

    - 实现组织架构同步可能涉及到RESTful API设计,使用JSON格式传输数据,以及与后端数据库的交互,如MySQL或MongoDB。 3. **流程引擎**: - 钉钉的核心特性之一就是工作流管理,此项目很可能包含了流程引擎的实现...

    仿百度,谷歌输入框自动提示功能---JSON版,修复上一版的一个BUG

    JSON版则表示这个功能是通过JSON(JavaScript Object Notation)数据格式来传输和处理数据的,JSON是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。 描述中提到的“修复上一版的一个BUG...

    飞龙工作流 FlowLong 真正的国产工作流引擎、json 格式实例模型、仿飞书钉钉审批流程设计器

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,因其易于人阅读和编写,同时也易于机器解析和生成,被广泛用于网络数据传输。在FlowLong中,流程实例模型以JSON格式表示,开发者可以轻松地创建、...

    jQuery仿新浪微博用户评论表单代码(完整版)支持二级回复,带json

    该资源是一个基于jQuery实现的仿新浪微博用户评论表单的完整代码示例,它包含了二级回复功能,并且使用了JSON数据格式进行数据交换。这个表单旨在提供一个与新浪微博类似的交互体验,无需页面刷新即可实现评论的添加...

    PMSG_Demo12_JSON_PMSG_

    在PMSG项目中,Simulink可能被用来设计和仿真数据处理或控制流程,这可能涉及到JSON数据的输入、处理和输出。 3. `_rels`:这个目录通常与OOXML文档中的关系文件有关,用于存储文档内部元素之间的关系,例如链接或...

    安卓网站交互JSONxmlWebserviceUPnP相关-仿大众点评app制作包含可用的开发者信息处理json接口调用生成key.zip

    源码是学习的关键,通过阅读和理解源码,可以学习到如何处理JSON数据,如何构建和调用接口,以及如何实现特定功能。 8. 学习资源:"下载更多打包源码~.url"可能指向更多的安卓源码示例,对于学习和提升编程技能非常...

    仿小米页面开发实现前后数据交互

    8. **安全性**:对于登录和注册功能,项目应考虑基本的安全措施,如使用HTTPS协议保证数据传输的安全,以及密码的加密存储。 9. **服务器端接口设计**:后端需要提供API接口供前端调用,这通常使用RESTful设计原则...

    html+json+web server+sql server的网站模板

    前台是纯html+JavaScript组成的页面,有登录,注册,上传,查找,显示的功能,通过Ajax获取数据,采用json传输数据,后台的web server 从数据库查找数据并返回拼接的json数据,通过修改admin.js文件的url路径获取...

    MYQQ.rar_MYQQ_仿QQ_聊天 文件传输

    【标题】"MYQQ.rar_MYQQ_仿QQ_聊天 文件传输"揭示了这是一个模仿QQ即时通讯软件的项目,其中包含了实现聊天和文件传输功能的源代码。MYQQ可能是一个独立开发的程序,旨在提供与QQ类似的功能,允许用户进行在线交流和...

    仿QQ聊天程序SOCKET编程服务端与客户端.rar_java qq_java socket _socket 仿QQ聊天_仿QQ

    在这个聊天程序中,Java提供了丰富的类库和API,用于创建线程、处理网络连接和数据传输。 2. **Socket编程**:Socket是网络通信的基础,它为应用程序提供了一种在不同计算机之间交换数据的机制。在Java中,`java...

    仿google搜索提示

    总结,实现“仿google搜索提示”功能,开发者需要熟练掌握SSH框架中的各个组件,理解jQuery的DOM操作和AJAX通信,以及JSON数据的处理。通过结合这些技术,可以创建一个响应快速、用户体验良好的搜索提示系统。在实际...

    小飞兔仿站小工具-获取网页源代码工具

    在仿站过程中,可能会遇到需要解析或序列化JSON数据的情况,例如网页API的调用返回结果。Json.NET提供了简单易用的API,可以方便地进行JSON与.NET对象之间的转换。 "LiteDB.dll"是LiteDB的库文件,这是一个小型的、...

Global site tag (gtag.js) - Google Analytics