码迷,mamicode.com
首页 > Web开发 > 详细

ajax接收后台数据在html页面显示

时间:2017-02-18 17:13:07      阅读:267      评论:0      收藏:0      [点我收藏+]

标签:请求   遍历   data   pre   writer   客户端   .ajax   character   内容   

Java代码

1         PrintWriter out=response.getWriter();       //向客户端发送字符数据
2         response.setContentType("text/text");          //设置请求以及响应的内容类型以及编码方式
3         response.setCharacterEncoding("UTF-8");
4         JSONArray  json = JSONArray.fromObject(newsList);   //将newsList对象转换为json对象
5         String str = json.toString();                //将json对象转换为字符串
6         out.write(str);                     //将str字符传输到前台       

Ajax代码

 

 1  $(document).ready(function() {
 2     $.ajax({
 3     url : "newsservlet",//请求地址
 4     dataType : "json",//数据格式 
 5     type : "post",//请求方式
 6     async : false,//是否异步请求
 7     success : function(data) {   //如何发送成功
 8     var html = "";
 9     for(var i=0;i<data.length;i++){    //遍历data数组
10             var ls = data[i];     
11             html +="<li><a href=‘second page text.html?newsid="+ls.news_id+"‘class=‘infNews_wrod_a‘><span>"+ls.news_name+"</span></a><span class=‘date‘>"+ls.news_time+"</span></li>";
12         }
13         $("#ulul").html(html); //在html页面id=ulul的标签里显示html内容
14     },
15 })
16 })

 

 HTML页面

 

1   <ul id="ulul">
2               
3              </ul>

 

 

 

 在ajax中,"#"代表的是一个标签的id,"."代表的是一个标签的class

 

在Java后台, 设置请求以及响应的内容类型以及编码方式  必须写在 json对象转换字符串 之前 ,否则会造成json中文乱码

 

ajax接收后台数据在html页面显示

标签:请求   遍历   data   pre   writer   客户端   .ajax   character   内容   

原文地址:http://www.cnblogs.com/BobCoder/p/6413463.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!