servlet如下:
- package forum.servlet;
- import java.io.IOException;
- import java.io.PrintWriter;
- import java.util.ArrayList;
- import java.util.Map;
- import javax.servlet.ServletException;
- import javax.servlet.http.HttpServlet;
- import javax.servlet.http.HttpServletRequest;
- import javax.servlet.http.HttpServletResponse;
- import forum.huhai.beanService.MenuService;
- import forum.huhai.beanService.impl.MenuServiceImpl;
- public class GetMenus extends HttpServlet {
- /**
- *
- */
- private static final long serialVersionUID = 9142776995911654738L;
- @Override
- protected void service(HttpServletRequest request, HttpServletResponse response)
- throws ServletException, IOException {
- class MenuForAjax{
- String id;
- String menuName;
- public MenuForAjax(String id,String menuName)
- {
- this.id=id;
- this.menuName=menuName;
- }
- public String toString()
- {
- return "{'id':'"+id+"','menuName':'"+menuName+"'}";
- }
- }
- class MenuList extends ArrayList<MenuForAjax>{
- /**
- *
- */
- private static final long serialVersionUID = 8591018782693731102L;
- @Override
- public String toString()
- {
- String str="[";
- for(MenuForAjax m:this)
- {
- str+=m+",";
- }
- return str.substring(0,str.length()-1)+"]";
- }
- }
- MenuService menuService=new MenuServiceImpl();
- Map<String,String> menus= menuService.getMenus();
- MenuList menuList=new MenuList();
- for(String key:menus.keySet())
- {
- menuList.add(new MenuForAjax(key,menus.get(key)));
- }
- response.setContentType("application/x-json");
- PrintWriter out= response.getWriter();
- out.print(menuList.toString());
- out.close();
- }
- }
javascript如下:
- $(document).ready(
- function()
- {
- //重置按钮清空FCKeditor中的内容
- $('#button_resetTopic').click(
- function()
- {
- var editor=FCKeditorAPI.GetInstance('content') ;
- editor.SetData('');
- }
- );
- //绑定版块选择框
- var getSections=function(mid)
- {
- $.post(
- 'servlet/getSections',
- {'menuID':mid},
- function(data)
- {
- var sectionSelect=$('#select_selectSection');
- sectionSelect.clearAll();
- var sections=eval(data);
- $.each(sections,
- function(i)
- {
- sectionSelect.addOption(sections[i].sectionName,sections[i].id);
- }
- );
- },
- 'json'
- );
- };
- $.post(
- 'servlet/getMenus',
- function(data)
- {
- var menuSelect=$('#select_selectMenu');
- var menus=eval(data);
- $.each(menus,
- function(i)
- {
- menuSelect.addOption(menus[i].menuName,menus[i].id);
- }
- );
- var menuID=menuSelect.getSelectedValue();
- getSections(menuID);
- menuSelect.change(
- function()
- {
- menuID=menuSelect.getSelectedValue();
- getSections(menuID);
- }
- );
- },
- 'json'
- );
- }
- );
注意:“response.setContentType("application/x-json");”,网上有的文章用的是“response.setContentType("text/xml;charset=utf-8");”,但我用“response.setContentType("text/xml;charset=utf-8");”时获得的是包含javascript的整个页面,而不是json数据,而用“response.setContentType("application/x-json");”获取到的就是JSON数据了。
文章来源:http://blog.csdn.net/huhai463127310/article/details/4901654
相关推荐
本教程将详细讲解如何利用JQuery、Servlet和JSON技术来实现这一功能。 首先,JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。在本示例中,JSON被...
在与服务器交互时,jQuery提供了`$.ajax()`或`$.getJSON()`等方法,通过Ajax技术实现异步数据获取,无需刷新整个页面。这极大地提升了用户体验。 2. **Servlet**:Servlet是Java EE的一部分,它定义了一个规范,...
【Demo流程】在这个"jquery ajax servlet json简单demo"中,我们可以预期以下流程: 1. 客户端(浏览器)的JavaScript代码使用jQuery的AJAX函数发起请求,请求可能包含一些参数,格式化为JSON。 2. 请求被发送到...
在IT行业中,`jQuery`、`Ajax`、`JSON` 和 `Servlet` 是四个非常重要的技术,它们在构建现代Web应用程序中发挥着关键作用。让我们深入探讨这些技术及其相互之间的结合。 首先,`jQuery` 是一个高效、轻量级的...
最后,将这个Servlet部署到服务器,比如Tomcat,当jQuery发起请求时,Servlet会接收到请求,处理后返回数据,jQuery的success回调函数接收到数据并更新页面,实现异步数据获取和显示。 总的来说,jQuery和Servlet的...
在现代Web开发中,Servlet、Ajax、JQuery和Json是不可或缺的技术组件,它们共同构建了高效、动态的用户界面。让我们深入探讨这些技术及其在实际应用中的交互。 Servlet是Java Web开发中的一个核心部分,它是一种...
4. **前后端数据交互**:在前端,jQuery的AJAX请求会发送用户数据到Servlet,Servlet处理后返回JSON数据。前端再通过回调函数处理这些数据,例如更新DOM元素,展示在页面上。整个过程无刷新,提高了用户体验。 5. *...
4. Servlet将JSON数据返回给客户端,JQuery解析响应,并更新表格内容。 5. 更新分页导航栏,显示正确的页码状态。 通过这种方式,项目实现了无刷新的分页效果,提升了用户体验。由于代码结构清晰,逻辑简单,对于...
标题“jQuery+json+servlet 动态取后台数据”揭示了一个常见的Web开发场景,其中前端JavaScript库jQuery被用来从后端服务器(通过servlet)获取动态数据,这些数据以JSON(JavaScript Object Notation)格式传输。...
在这个例子中,Servlet接收了来自jQuery的POST请求,解析了参数,进行了用户验证,并以JSON格式返回了结果。jQuery的`success`回调函数接收到这个响应并进行相应的处理。 这个简单的例子展示了jQuery如何通过Ajax与...
服务器响应时,同样可以返回Json格式的数据,Jquery在前端接收到响应后,解析Json,更新页面内容,从而实现无刷新的动态交互。 具体到这个示例的"jsonjquery"文件,可能包含了以下内容: 1. HTML文件:展示用户...
在本例中,AJAX用于异步地向Servlet发送请求,获取JSON数据,然后使用jQuery解析和处理这些数据,无须用户感知页面的刷新。 具体流程可能如下: 1. 用户在JSP页面上触发一个操作,例如点击按钮。 2. 使用jQuery的`...
通过jQuery,我们可以方便地创建Ajax请求,获取或发送服务器端的数据,而无需关心浏览器之间的差异。 Ajax(Asynchronous JavaScript and XML)是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页的...
这个例子展示了如何使用jQuery的`getJSON()`函数从Servlet获取JSON数据,并在客户端进行处理。在实际项目中,这种交互方式常用于实现动态数据加载、异步表单提交等功能。记住,确保Servlet和前端页面都在同一个域下...
1.纯servlet+jquery局部刷新; 2.fresh 后台包含 json内容,需要json相关jar包,自行下载,不需要的可以删除; 3.有页面点击事件,初学者可以研究下; 4.QQ569317668 不喜勿喷 servlet局部刷新及json字符串 相互学习...
jQuery支持通过AJAX获取JSON数据,并可以非常方便地将JSON数据转换为jQuery对象进行操作。 在实际应用中,通常后端会返回JSON格式的数据,前端使用jQuery来解析这些数据并动态更新页面内容。这种方式大大提高了网页...
**jQuery + Servlet 自动补全功能详解** 在Web开发中,自动补全(Autocomplete)是一种常见的用户体验增强功能,它能够根据用户输入的部分文本,快速提供可能的匹配选项。本例子基于jQuery库和Servlet技术实现了一...
在本案例中,我们将使用EasyUI的图表组件来显示从Servlet通过JSON获取的数据。 步骤如下: 1. **数据准备**:在Servlet中,你需要创建一个Java对象或集合来存储要展示的数据,然后使用Jackson或Gson库将这些对象...
在本文中,我们将探讨如何使用Java Servlet生成JSON格式的数据,并结合jQuery在前端展示这些数据。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它使得数据的传输变得简单而直观。Servlet是Java...
在上面的代码中,我们使用jQuery的`$.ajax`方法发送GET请求到Servlet,设置`dataType`为'json',以便jQuery能正确解析返回的JSON数据。在`success`回调函数中,遍历JSON数组,为每个数据项创建一个新的表格行,并将...