`
arrowbest
  • 浏览: 7840 次
社区版块
存档分类
最新评论

jQuery获取servlet返回的JSON

 
阅读更多

servlet如下:

 

[java] view plaincopy
  1. package forum.servlet;  
  2.   
  3. import java.io.IOException;  
  4. import java.io.PrintWriter;  
  5. import java.util.ArrayList;  
  6. import java.util.Map;  
  7.   
  8. import javax.servlet.ServletException;  
  9. import javax.servlet.http.HttpServlet;  
  10. import javax.servlet.http.HttpServletRequest;  
  11. import javax.servlet.http.HttpServletResponse;  
  12.   
  13. import forum.huhai.beanService.MenuService;  
  14. import forum.huhai.beanService.impl.MenuServiceImpl;  
  15.   
  16. public class GetMenus extends HttpServlet {  
  17.   
  18.     /** 
  19.      *  
  20.      */  
  21.     private static final long serialVersionUID = 9142776995911654738L;  
  22.   
  23.     @Override  
  24.     protected void service(HttpServletRequest request, HttpServletResponse response)  
  25.             throws ServletException, IOException {  
  26.           
  27.         class MenuForAjax{  
  28.             String id;  
  29.             String menuName;  
  30.             public MenuForAjax(String id,String menuName)   
  31.             {  
  32.                 this.id=id;  
  33.                 this.menuName=menuName;  
  34.             }             
  35.               
  36.             public String toString()  
  37.             {  
  38.                 return "{'id':'"+id+"','menuName':'"+menuName+"'}";  
  39.             }  
  40.         }  
  41.         class MenuList extends ArrayList<MenuForAjax>{  
  42.                 /** 
  43.              *  
  44.              */  
  45.             private static final long serialVersionUID = 8591018782693731102L;  
  46.   
  47.                 @Override  
  48.                 public String toString()  
  49.                 {  
  50.                     String str="[";  
  51.                     for(MenuForAjax m:this)  
  52.                     {  
  53.                         str+=m+",";  
  54.                     }  
  55.                     return str.substring(0,str.length()-1)+"]";  
  56.                 }  
  57.             }  
  58.         MenuService menuService=new MenuServiceImpl();  
  59.         Map<String,String> menus= menuService.getMenus();  
  60.         MenuList menuList=new MenuList();  
  61.         for(String key:menus.keySet())  
  62.         {  
  63.             menuList.add(new MenuForAjax(key,menus.get(key)));            
  64.         }         
  65.         response.setContentType("application/x-json");  
  66.         PrintWriter out= response.getWriter();        
  67.         out.print(menuList.toString());  
  68.         out.close();  
  69.     }  
  70. }  

 

javascript如下:

 

[javascript] view plaincopy
  1. $(document).ready(  
  2.             function()  
  3.             {  
  4.                 //重置按钮清空FCKeditor中的内容  
  5.                 $('#button_resetTopic').click(  
  6.                     function()  
  7.                     {  
  8.                         var editor=FCKeditorAPI.GetInstance('content') ;                          
  9.                         editor.SetData('');                                           
  10.                     }  
  11.                 );  
  12.                 //绑定版块选择框  
  13.                 var getSections=function(mid)  
  14.                 {  
  15.                     $.post(  
  16.                         'servlet/getSections',  
  17.                         {'menuID':mid},  
  18.                         function(data)  
  19.                         {  
  20.                             var sectionSelect=$('#select_selectSection');  
  21.                             sectionSelect.clearAll();                                                     
  22.                             var sections=eval(data);                              
  23.                             $.each(sections,  
  24.                                 function(i)  
  25.                                 {                                                                 
  26.                                     sectionSelect.addOption(sections[i].sectionName,sections[i].id);                                                                  
  27.                                 }  
  28.                             );    
  29.                         },  
  30.                         'json'  
  31.                     );  
  32.                 };  
  33.                 $.post(  
  34.                     'servlet/getMenus',  
  35.                     function(data)  
  36.                     {  
  37.                         var menuSelect=$('#select_selectMenu');  
  38.                         var menus=eval(data);  
  39.                         $.each(menus,  
  40.                             function(i)  
  41.                             {                                                                 
  42.                                 menuSelect.addOption(menus[i].menuName,menus[i].id);                                  
  43.                             }  
  44.                         );        
  45.                         var menuID=menuSelect.getSelectedValue();  
  46.                         getSections(menuID);  
  47.                         menuSelect.change(  
  48.                             function()  
  49.                             {                             
  50.                                 menuID=menuSelect.getSelectedValue();                                 
  51.                                 getSections(menuID);  
  52.                             }  
  53.                         );                                    
  54.                     },  
  55.                     'json'        
  56.                 );  
  57.             }  
  58.         );  

 

注意:“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实现下拉框级联

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

    Jquery+servlet+JSON处理

    在与服务器交互时,jQuery提供了`$.ajax()`或`$.getJSON()`等方法,通过Ajax技术实现异步数据获取,无需刷新整个页面。这极大地提升了用户体验。 2. **Servlet**:Servlet是Java EE的一部分,它定义了一个规范,...

    jquery ajax servlet json简单demo

    【Demo流程】在这个"jquery ajax servlet json简单demo"中,我们可以预期以下流程: 1. 客户端(浏览器)的JavaScript代码使用jQuery的AJAX函数发起请求,请求可能包含一些参数,格式化为JSON。 2. 请求被发送到...

    Jquery+ajax+json+servlet

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

    jquery+servlet 异步获取数据 并显示出来(很有收获的哦!)

    最后,将这个Servlet部署到服务器,比如Tomcat,当jQuery发起请求时,Servlet会接收到请求,处理后返回数据,jQuery的success回调函数接收到数据并更新页面,实现异步数据获取和显示。 总的来说,jQuery和Servlet的...

    Servlet利用Ajax,JQuery交互Json

    在现代Web开发中,Servlet、Ajax、JQuery和Json是不可或缺的技术组件,它们共同构建了高效、动态的用户界面。让我们深入探讨这些技术及其在实际应用中的交互。 Servlet是Java Web开发中的一个核心部分,它是一种...

    jquery+ajax+json+servlet实例源码

    4. **前后端数据交互**:在前端,jQuery的AJAX请求会发送用户数据到Servlet,Servlet处理后返回JSON数据。前端再通过回调函数处理这些数据,例如更新DOM元素,展示在页面上。整个过程无刷新,提高了用户体验。 5. *...

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

    4. Servlet将JSON数据返回给客户端,JQuery解析响应,并更新表格内容。 5. 更新分页导航栏,显示正确的页码状态。 通过这种方式,项目实现了无刷新的分页效果,提升了用户体验。由于代码结构清晰,逻辑简单,对于...

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

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

    jquery与servlet交互

    在这个例子中,Servlet接收了来自jQuery的POST请求,解析了参数,进行了用户验证,并以JSON格式返回了结果。jQuery的`success`回调函数接收到这个响应并进行相应的处理。 这个简单的例子展示了jQuery如何通过Ajax与...

    Java+Servlet+Jquery+Json基础示例

    服务器响应时,同样可以返回Json格式的数据,Jquery在前端接收到响应后,解析Json,更新页面内容,从而实现无刷新的动态交互。 具体到这个示例的"jsonjquery"文件,可能包含了以下内容: 1. HTML文件:展示用户...

    JSON+Jquery+servlet+jsp+ajax例子

    在本例中,AJAX用于异步地向Servlet发送请求,获取JSON数据,然后使用jQuery解析和处理这些数据,无须用户感知页面的刷新。 具体流程可能如下: 1. 用户在JSP页面上触发一个操作,例如点击按钮。 2. 使用jQuery的`...

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

    通过jQuery,我们可以方便地创建Ajax请求,获取或发送服务器端的数据,而无需关心浏览器之间的差异。 Ajax(Asynchronous JavaScript and XML)是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页的...

    JQuery getJSON() 调用Servlet简单例子

    这个例子展示了如何使用jQuery的`getJSON()`函数从Servlet获取JSON数据,并在客户端进行处理。在实际项目中,这种交互方式常用于实现动态数据加载、异步表单提交等功能。记住,确保Servlet和前端页面都在同一个域下...

    servlet局部刷新及json字符串

    1.纯servlet+jquery局部刷新; 2.fresh 后台包含 json内容,需要json相关jar包,自行下载,不需要的可以删除; 3.有页面点击事件,初学者可以研究下; 4.QQ569317668 不喜勿喷 servlet局部刷新及json字符串 相互学习...

    Jquery解析json

    jQuery支持通过AJAX获取JSON数据,并可以非常方便地将JSON数据转换为jQuery对象进行操作。 在实际应用中,通常后端会返回JSON格式的数据,前端使用jQuery来解析这些数据并动态更新页面内容。这种方式大大提高了网页...

    JQuery+servlet自动补全例子

    **jQuery + Servlet 自动补全功能详解** 在Web开发中,自动补全(Autocomplete)是一种常见的用户体验增强功能,它能够根据用户输入的部分文本,快速提供可能的匹配选项。本例子基于jQuery库和Servlet技术实现了一...

    利用servlet和json生成easyUI图表

    在本案例中,我们将使用EasyUI的图表组件来显示从Servlet通过JSON获取的数据。 步骤如下: 1. **数据准备**:在Servlet中,你需要创建一个Java对象或集合来存储要展示的数据,然后使用Jackson或Gson库将这些对象...

    Java Servlet生成JSON格式数据并用jQuery显示的方法

    在本文中,我们将探讨如何使用Java Servlet生成JSON格式的数据,并结合jQuery在前端展示这些数据。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它使得数据的传输变得简单而直观。Servlet是Java...

    servlet+jquery表格数据填充

    在上面的代码中,我们使用jQuery的`$.ajax`方法发送GET请求到Servlet,设置`dataType`为'json',以便jQuery能正确解析返回的JSON数据。在`success`回调函数中,遍历JSON数组,为每个数据项创建一个新的表格行,并将...

Global site tag (gtag.js) - Google Analytics