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();
}
}
}