jQuery获取servlet返回的JSON

最新推荐文章于 2024-08-28 13:25:02 发布

原创最新推荐文章于 2024-08-28 13:25:02 发布 · 105 阅读

0 ·

CC 4.0 BY-SA版权

java基础专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用Servlet来处理HTTP请求并返回JSON格式数据的示例。通过Java Servlet实现了从数据库获取菜单信息，并将其转换为JSON格式发送给客户端。同时，前端使用jQuery的$.post方法来接收这些JSON数据并进行处理。

servlet如下：

[java]view plaincopy
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如下：

[javascript]view plaincopy
$(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.youkuaiyun.com/huhai463127310/article/details/4901654