`
qepipnu
  • 浏览: 76366 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

jquery+json+servlet

阅读更多
jquery+json小例子


使用jquery发送请求到servlet,返回json字符串,然后在前台解析json并显示



后台servlet的请求处理(需要引入json.jar):

Java代码
import java.io.IOException;  
  
import javax.servlet.ServletException;  
import javax.servlet.http.HttpServlet;  
import javax.servlet.http.HttpServletRequest;  
import javax.servlet.http.HttpServletResponse;  
  
import org.json.JSONArray;  
import org.json.JSONObject;  
  
public class JsonViewServlet extends HttpServlet {  
  
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)  
            throws ServletException, IOException {  
        doPost(req,resp);  
    }  
  
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)  
            throws ServletException, IOException {  
        resp.setContentType("text/html;charset=UTF-8");  
        resp.setHeader("Cache-Control","no-cache");  
        JSONObject json = new JSONObject();  
        try{  
        JSONArray members = new JSONArray();  
        for(int i=0;i<10;i++){  
            JSONObject member = new JSONObject()  
            .put("name", "张小"+i)  
            .put("age", "28")  
            .put("email", "test@test.com");  
            members.put(i, member);  
        }  
        json.put("jobs", members);  
        }catch(Exception e){  
            e.printStackTrace();  
        }  
        System.out.println(json.toString());  
        resp.getWriter().write(json.toString());  
    }  
  
}  
import java.io.IOException; 
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; 
import org.json.JSONArray;
import org.json.JSONObject; 
public class JsonViewServlet extends HttpServlet {  
       protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {  
       doPost(req,resp);  }  
      
       protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {  
       resp.setContentType("text/html;charset=UTF-8");  
       resp.setHeader("Cache-Control","no-cache");  
       JSONObject json = new JSONObject();  
       try{  
       JSONArray members = new JSONArray();  
       for(int i=0;i<10;i++){   
       JSONObject member = new JSONObject().put("name", "张小"+i).put("age", "28").put("email", "test@test.com");  
       members.put(i, member);  
       }  
       json.put("jobs", members);  
       }catch(Exception e){    e.printStackTrace();   }  
       System.out.println(json.toString());  
       resp.getWriter().write(json.toString());  }  }
       通过上面代码,将向页面发送下面字符串:

Html代码
{"jobs":[  
    {"age":"28","email":"test@test.com","name":" 张小0"},  
    {"age":"28","email":"test@test.com","name":" 张小1"},  
    {"age":"28","email":"test@test.com","name":" 张小2"},  
    {"age":"28","email":"test@test.com","name":" 张小3"},  
    {"age":"28","email":"test@test.com","name":" 张小4"},  
    {"age":"28","email":"test@test.com","name":" 张小5"},  
    {"age":"28","email":"test@test.com","name":" 张小6"},  
    {"age":"28","email":"test@test.com","name":" 张小7"},  
    {"age":"28","email":"test@test.com","name":" 张小8"},  
    {"age":"28","email":"test@test.com","name":" 张小9"}  
]}  
{"jobs":[  {"age":"28","email":"test@test.com","name":"张小0"},  {"age":"28","email":"test@test.com","name":"张小1"},  {"age":"28","email":"test@test.com","name":"张小2"},  {"age":"28","email":"test@test.com","name":"张小3"},  {"age":"28","email":"test@test.com","name":"张小4"},  {"age":"28","email":"test@test.com","name":"张小5"},  {"age":"28","email":"test@test.com","name":"张小6"},  {"age":"28","email":"test@test.com","name":"张小7"},  {"age":"28","email":"test@test.com","name":"张小8"},  {"age":"28","email":"test@test.com","name":"张小9"} ]}

前台页面(需要引入jquery.js和json.js):

Jsp代码
<%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8"%>  
<html>  
  <head>  
    <title> 使用jquery  ajax显示JSON数据</title>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <script language="javascript" src="../jslib/jquery.js"></script>  
    <script language="javascript" src="../jslib/json.js"></script>  
  </head>  
  <body>  
    <h1>JSON 数据显示.</h1>  
    <input type="button" value="JsonView" onClick="jsonview();">  
    <div id="dateMessage">  
        <table id="planTable">  
            <tr><td> 名称</td><td>年龄</td><td>邮箱</td></tr>  
        </table>  
    </div>  
  </body>  
</html>  
<script language="javascript">  
    function jsonview(){  
        $.getJSON("http://localhost:8080/ajaxServlet/servlet/jsonViewServlet",null,function call(data){  
        wirteHtml(data);  
    });}  
    function wirteHtml(data){  
        //alert(data.toJSONString());  
        //alert(data.jobs); //返回的data就是一个JSON的对象  
        var continents = data.jobs;  
        for(var i=0;i<continents.length;i++){  
            //alert(continents[i].name);  
             var newLine = $("#planTable").length;  
             var row = planTable.insertRow(newLine);  
             var col = row.insertCell(0);  
             col.innerHTML = continents[i].name;  
             col = row.insertCell(1);  
             col.innerHTML = continents[i].age;  
             col = row.insertCell(2);  
             col.innerHTML = continents[i].email;  
        }  
    }  
</script>  
<%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8"%>
<html>  
<head>    
<title>使用jquery  ajax显示JSON数据</title>    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">    
<script language="javascript" src="../jslib/jquery.js"></script>    
<script language="javascript" src="../jslib/json.js"></script>  
</head>  
<body>   
<h1>JSON数据显示.</h1> 
<input type="button" value="JsonView" onClick="jsonview();"> 
<div id="dateMessage">  
<table id="planTable">   
<tr><td>名称</td><td>年龄</td><td>邮箱</td></tr>  
</table> 
</div>  
</body>
</html>
<script language="javascript"> 
function jsonview(){  
$.getJSON("http://localhost:8080/ajaxServlet/servlet/jsonViewServlet",null,function call(data){  
wirteHtml(data);  });

function wirteHtml(data){
   //alert(data.toJSONString());  
   //alert(data.jobs);
   //返回的data就是一个JSON的对象  
   var continents = data.jobs;  
   for(var i=0;i<continents.length;i++){   
   //alert(continents[i].name);    
   var newLine = $("#planTable").length;       
   var row = planTable.insertRow(newLine);       
   var col = row.insertCell(0);       
   col.innerHTML = continents[i].name;       
   col = row.insertCell(1);       
   col.innerHTML = continents[i].age;       
   col = row.insertCell(2);       
   col.innerHTML = continents[i].email;  
   }  }
</script> 

WEB.XML配置

Xml代码
<!-- jsonView servlet -->  
  <servlet>  
    <servlet-name>jsonViewServlet</servlet-name>  
    <servlet-class>com.arthurs.json.JsonViewServlet</servlet-class>  
  </servlet>  
  
<!-- jsonView mapping -->  
  <servlet-mapping>  
    <servlet-name>jsonViewServlet</servlet-name>  
    <url-pattern>/servlet/jsonViewServlet</url-pattern>  
  </servlet-mapping>  
<!-- jsonView servlet -->   <servlet>     <servlet-name>jsonViewServlet</servlet-name>     <servlet-class>com.arthurs.json.JsonViewServlet</servlet-class>   </servlet>  <!-- jsonView mapping -->   <servlet-mapping>     <servlet-name>jsonViewServlet</servlet-name>     <url-pattern>/servlet/jsonViewServlet</url-pattern>   </servlet-mapping>
分享到:
评论

相关推荐

    jQuery+json+servlet 动态取后台数据

    标题“jQuery+json+servlet 动态取后台数据”揭示了一个常见的Web开发场景,其中前端JavaScript库jQuery被用来从后端服务器(通过servlet)获取动态数据,这些数据以JSON(JavaScript Object Notation)格式传输。...

    Java+Servlet+Jquery+Json基础示例

    在这个"Java+Servlet+Jquery+Json基础示例"中,我们可以看到如何将这四种技术融合在一起创建一个Web应用。首先,用户通过前端界面(HTML+CSS+Jquery)发送Ajax请求,Jquery负责包装和发送这些请求,通常是以Json格式...

    Servlet+json+js(jquery)+jsp实现分页

    本项目使用Servlet、JSON、JavaScript(JQuery)和JSP技术实现了一个简单易懂、功能完善的分页解决方案。 **Servlet** 是Java服务器端编程的基础,它负责处理HTTP请求和响应。在分页应用中,Servlet主要负责接收...

    Jquery+ajax+json+servlet

    在IT行业中,`jQuery`、`Ajax`、`JSON` 和 `Servlet` 是四个非常重要的技术,它们在构建现代Web应用程序中发挥着关键作用。让我们深入探讨这些技术及其相互之间的结合。 首先,`jQuery` 是一个高效、轻量级的...

    jquery+ajax+json+servlet实例源码

    【标题】:“jQuery + AJAX + JSON + Servlet 实例源码” 这个实例源码主要展示了如何在Web开发中利用jQuery库进行AJAX异步请求,与后台Servlet进行数据交互,并通过JSON格式来序列化和反序列化数据。这些技术是...

    Ajax + jQuery + json + js + jsp + servlet 三级联动

    在这个项目中,"Ajax + jQuery + json + js + jsp + servlet 三级联动"是一个完整的解决方案,它涵盖了从前端到后端的数据通信和处理。 首先,让我们深入理解每个技术的作用: 1. **Ajax**(Asynchronous ...

    Jquery+servlet+JSON处理

    标题中的“Jquery + servlet + JSON处理”是一个典型的Web开发技术组合,主要涉及前端与后端的数据交互。这里,jQuery是一个流行的JavaScript库,用于简化HTML文档遍历、事件处理、动画以及Ajax交互。Servlet是Java...

    JQuery + Servlet +Json实现下拉框级联

    本教程将详细讲解如何利用JQuery、Servlet和JSON技术来实现这一功能。 首先,JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。在本示例中,JSON被...

    JSON+Jquery+servlet+jsp+ajax例子

    通过这个例子,你可以学习到如何结合使用JSON、jQuery、Servlet和AJAX来构建一个动态、交互性强的Web应用,理解前后端通信的过程以及如何在客户端和服务器端之间有效地传递数据。同时,这也是实际开发中常见的一种...

    jquery+ajax+jsp+servlet实现二级级联菜单

    ### 使用jQuery、Ajax、JSP与Servlet实现二级级联菜单 #### 一、项目背景与技术栈概述 本文档将详细介绍如何使用jQuery、Ajax、JSP与Servlet来实现一个简单的二级级联菜单功能。该功能常见于许多Web应用程序中,如...

    公交线路搜索系统,mysql+jdbc+servlet+freemarker+json+jquery+arttemplate+百

    MySQL负责数据存储,JDBC和Servlet处理数据交互,Freemarker和ArtTemplate构建用户界面,jQuery增强用户体验,而JSON和百度地图API则提供了数据传输和地图服务。这个系统展示了Web开发中的典型技术栈,为类似应用...

    struts2+jquery+json+List

    Struts2、jQuery、JSON和List是Web开发中常见的技术栈,它们在构建动态、交互式的Web应用程序中扮演着重要角色。这篇博文可能是探讨如何在Struts2框架中结合jQuery和JSON来处理List类型的数据。 Struts2是一个流行...

    struts2+jQuery+json 实例

    Struts2、jQuery和JSON是Web开发中的三个关键组件,它们共同构成了高效、动态和交互式的用户界面。这里我们将深入探讨这三个技术,并结合实例来理解它们如何协同工作。 首先,Struts2是一个基于MVC(Model-View-...

    JSP+Jquery+JSON 集合实现AJAX

    本教程主要聚焦于如何利用JSP(JavaServer Pages)、jQuery和JSON(JavaScript Object Notation)来实现AJAX功能。 **JSP(JavaServer Pages)** JSP是Java的一种视图技术,用于生成动态网页。开发者可以在JSP页面...

    二级关联下拉框jquery+ json java jsp

    这个项目涉及到前端与后端的交互,需要熟练掌握jQuery的DOM操作和Ajax请求,以及Java Servlet和JSON的使用。通过这个实践,开发者可以提升对前后端协同工作的理解,同时提高处理动态数据的能力。

    jquery+json+jsp+database

    根据提供的文件信息,我们可以深入探讨以下几个关键的知识点:jQuery、JSON、JSP 以及数据库的集成使用。这些技术经常被组合在一起实现动态网页应用,尤其是从前端与后端交互的角度来看。 ### 一、jQuery jQuery ...

    struts2+spring+hibernate+jquery+dwr+json

    标题 "struts2+spring+hibernate+jquery+dwr+json" 描述了一个集成的Web应用程序开发框架,其中包含了多个关键技术和库。这个框架旨在提高开发效率,提供灵活的数据管理,以及用户友好的前端交互。 1. Struts2:...

    springmvc + jquery + ajax + json 异步传递数据

    SpringMVC、jQuery、Ajax和JSON这四个技术的结合,为开发者提供了一种高效且灵活的方式来实现这一功能。接下来,我们将深入探讨这些技术以及它们如何协同工作。 SpringMVC是Spring框架的一部分,是一个强大的MVC...

    jQuery + Ajax + json 级联

    ### jQuery + Ajax + JSON 级联:深入解析与应用 在现代Web开发中,级联选择器(Cascade Selectors)是一种常见的用户界面设计模式,主要用于处理多层级的数据选择,如国家-省份-城市的选择。本文将深入探讨如何...

    ajax+servlet+jquery+jsp示例

    在"ajax+servlet+jquery+jsp示例"中,我们看到的是一个使用Ajax实现前后台交互的经典应用场景。 1. **jQuery的Ajax函数**:jQuery是一个流行的JavaScript库,它简化了JavaScript的许多操作,包括Ajax请求。在这个...

Global site tag (gtag.js) - Google Analytics