1. 程式人生 > >SSM中json的傳值方式

SSM中json的傳值方式

1.第一種使用$.getJSON()的方式(傳入List資料)
(1)控制器程式碼

新增@RequestMapping(value="方法名",produces = "application/json; charset=UTF-8")

新增@ResponseBody

注意方法名與js程式碼中的路徑引用名要一致

在獲取資料庫資料之後,定義一個json接收查到資料的list名,返回json

    /*
     * 獲取所有公告
     */
    @RequestMapping(value="getAllNotice",produces = "application/json; charset=UTF-8")//返回的是json,不是html
    @ResponseBody
    public String getAllNotice(){
        List<Notice> notices = newsService.getAllNotice();
        String json = JSON.toJSONString(notices);
        return json;
    }


(2)js程式碼
在js程式碼中使用$.getJSON()方式接收資料,如

 $.getJSON("News/getAllNotice",function(r){

});

        //顯示news-view.jsp頁面左邊公告欄標題
        $.getJSON("News/getAllNotice",function(r){
            //迴圈輸出顯示公告
            for(var i = 0; i < r.length; i++){
                $("#news-list1 ul").append("<li><a index='"+i+"'>"+r[i].title+"</a></li>");
            }
            $("#news-list1 ul li a").click(function(){
                //單擊左邊的公告標題顯示內容
                var index = $(this).attr("index");//取得下標
                $("#news h1").html(r[index].title);//顯示標題
                $("#news .content").html(r[index].content);//顯示詳細資訊
            });
        });

2.    第二種 使用   $.ajax({})方式 (傳入List資料)
(1)控制器程式碼

 新增@RequestMapping("getAllNews")

接收資料後用JSONArray填充資料,放入 OutUtil.print(jsonArray, response);中,在js中接收資料

 OutUtil為一個封裝的一個類,是一個清除關閉json的一個類,print()是它封裝的方法,這樣方便寫程式碼,不用每個方法都寫一次PrintWriter,解決中文亂碼,具體寫法我在頁尾貼出來

    /*
     * 獲取所有新聞
     */
    @RequestMapping("getAllNews")
    public String getAllNews(HttpServletResponse response){
        List<News> news = newsService.getAllNews();
        JSONArray jsonArray = JSONArray.fromObject(news);
        OutUtil.print(jsonArray, response);
        return null;
    }


(2)js程式碼

        //顯示news-view.jsp頁面左邊新聞欄標題
        $.ajax({
            type:"post",
            url:"News/getAllNews.do",
            dataType:"json",
            success:function(r){
                for(var i = 0; i < r.length; i++){//迴圈顯示標題
                    $("#news-list2 ul").append("<li><a index='"+i+"'>"+r[i].title+"</a></li>");
                }
                $("#news-list2 ul li a").click(function(){
                    //單擊左邊的新聞標題顯示內容
                    var index = $(this).attr("index");
                    $("#news h1").html(r[index].title);
                    $("#news .content").html(r[index].content);
                });
            }
        });


3.傳入一個物件的json程式碼
(1)控制器程式碼

    /*
     * 根據新聞id獲取該新聞詳細資訊
     */
    @RequestMapping("getNewById")
    public String getNewByIdS(String nid,HttpServletResponse response){
        News news = newsService.getNewsById(nid);
        JSONObject jsonObject =new JSONObject();
        jsonObject.put("rows", news);//傳入得到的新聞物件
        OutUtil.print(jsonObject, response);
        return null;
    }

(2)js程式碼

            //顯示新聞詳細資訊
            $.ajax({
                type:"post",
                url:"News/getNewById.do?nid="+id,
                dataType:"json",
                success:function(res){
                    //將資訊顯示在頁面中
                    $("#news h1").append(res.rows.title);
                    $("#news .content").append(res.rows.content);    
                }
            });   

4.封裝的OutUtil類,減少程式碼量

package cn.jbit.util;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

public class OutUtil {
	public static void print(Object o,HttpServletResponse response){
		//解決ajax中文亂碼
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out;
		try {
			out = response.getWriter();
			out.print(o);
			out.flush();
			out.close();
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		
	}
}