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


Posted in Javascript onFebruary 19, 2017

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

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

Javascript 相关文章推荐
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
Dec 28 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
Dec 29 Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
对new functionName()定义一个函数的理解
May 22 Javascript
jQuery向后台传入json格式数据的方法
Feb 13 Javascript
javascript表单事件处理方法详解
May 15 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
Oct 19 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
Dec 18 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
CodeMirror js代码加亮使用总结
Mar 25 Javascript
JavaScrip数组删除特定元素的几种方法总结
Sep 06 Javascript
详解Ubuntu安装angular-cli遇到的坑
Sep 08 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 #Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 #Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 #Javascript
Angular 输入框实现自定义验证功能
Feb 19 #Javascript
js实现九宫格的随机颜色跳转
Feb 19 #Javascript
原生JS实现垂直手风琴效果
Feb 19 #Javascript
js鼠标移动时禁止选中文字
Feb 19 #Javascript
You might like
php引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
PHP ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
一个实用的php验证码类
2017/07/06 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
JavaScript实现图像模糊化的方法实例
2017/01/15 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
微信小程序自定义多列选择器使用详解
2019/06/21 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
[34:27]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第一局
2016/02/26 DOTA
Python函数中定义参数的四种方式
2014/11/30 Python
Python安装第三方库的3种方法
2015/06/21 Python
Python算术运算符实例详解
2017/05/31 Python
Python程序退出方式小结
2017/12/09 Python
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
python通过cython加密代码
2020/12/11 Python
python中常用的数据结构介绍
2021/01/12 Python
新加坡领先的在线生活方式和杂货购物网站:EAMART
2019/04/02 全球购物
怎样建立和理解非常复杂的声明?例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组?
2013/03/19 面试题
西安交大自主招生自荐信
2014/01/27 职场文书
测试工程师职业规划书
2014/02/06 职场文书
优良学风班申请材料
2014/02/13 职场文书
2014机关干部学习“焦裕禄精神”思想汇报
2014/09/19 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
2015年化验员工作总结
2015/04/10 职场文书
深入浅析Django MTV模式
2021/09/04 Python