SSM中json的傳值方式
阿新 • • 發佈:2019-01-26
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();
}
}
}