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

 更新时间:2017年02月19日 14:11:17   转载 作者:BobCoder  
本篇文章主要介绍了ajax接收后台数据在html页面显示的方法,具有很好的参考价值,下面跟着小编一起来看下吧

Java代码

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

Ajax代码

 $(document).ready(function() {
 $.ajax({
 url : "newsservlet",//请求地址
 dataType : "json",//数据格式 
 type : "post",//请求方式
 async : false,//是否异步请求
 success : function(data) { //如何发送成功
 var html = "";
 for(var i=0;i<data.length;i++){ //遍历data数组
 var ls = data[i]; 
 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>";
 }
 $("#ulul").html(html); //在html页面id=ulul的标签里显示html内容
 },
})
})

HTML页面

<ul id="ulul"></ul>

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

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

相关文章

  • JS实现的视频弹幕效果示例

    JS实现的视频弹幕效果示例

    这篇文章主要介绍了JS实现的视频弹幕效果,涉及javascript基于事件响应的页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2018-08-08
  • javascript 改变网页加载的CSS

    javascript 改变网页加载的CSS

    javascript 改变网页加载的CSS主要通过动态响应select触发的选项变化控制link标签加载的css,以实现不依赖cookie控制的页面css样式动态加载功能,需要的朋友可以参考一下
    2007-12-12
  • js清空form表单中的内容示例

    js清空form表单中的内容示例

    这篇文章主要介绍了js如何清空form表单中的内容,下面有个不错的示例,大家可以参考下
    2014-05-05
  • 捕获关闭窗口的脚本

    捕获关闭窗口的脚本

    对于需要获取一个窗口关闭后的返回信息时,需要用的到。
    2009-01-01
  • 使用JavaScriptCore实现OC和JS交互详解

    使用JavaScriptCore实现OC和JS交互详解

    JavaScriptCore是webkit的一个重要组成部分,主要是对JS进行解析和提供执行环境。下面这篇文章主要给大家介绍了使用JavaScriptCore实现OC和JS交互的相关资料,文中介绍的非常详细,需要的朋友可以参考学习,下面来一起看看吧。
    2017-03-03
  • js实现点击添加一个input节点

    js实现点击添加一个input节点

    本文给大家分享的是一段点击自动添加inpu节点的代码,非常的简单实用,这里推荐给大家。
    2014-12-12
  • 基于JavaScript实现自定义滚动条

    基于JavaScript实现自定义滚动条

    这篇文章主要为大家详细介绍了基于JavaScript实现自定义滚动条,可以直接使用的滚动条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • js select下拉联动 更具级联性!

    js select下拉联动 更具级联性!

    这篇文章主要为大家详细介绍了js select下拉联动的相关资料,更具级联性!文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • 关于页面被拦截的问题

    关于页面被拦截的问题

    先来看一下几个常用浏览器的拦截设置
    2010-02-02
  • 实现点击列表弹出列表索引的两种方式

    实现点击列表弹出列表索引的两种方式

    使用利用事件冒泡委托给列表的父节点去处理的方式第二种方式就是使用闭包了,感兴趣的你可以参考下本文,或许对你学习js有所帮助
    2013-03-03

最新评论