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

Posted 2020-08-31 BobCoder

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中文乱码