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 相关文章推荐
XHTML-Strict 内允许出现的标签
Dec 11 Javascript
javscript对象原型的一些看法
Sep 19 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
node.js中的fs.futimes方法使用说明
Dec 17 Javascript
使用jQuery简单实现模拟浏览器搜索功能
Dec 21 Javascript
js判断输入字符串是否为空、空格、null的方法总结
Jun 14 Javascript
由浅入深剖析Angular表单验证
Jul 14 Javascript
js上传图片预览的实现方法
May 09 Javascript
js实现水平滚动菜单导航
Jul 21 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
利用Console来Debug的10个高级技巧汇总
Mar 26 Javascript
详解微信小程序开发之formId使用(模板消息)
Aug 27 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 curl使用实例
2015/07/02 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
2014/04/30 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
javascript实现图片循环渐显播放的方法
2015/02/24 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
jquery日历插件e-calendar升级版
2016/11/10 Javascript
nodejs中使用HTTP分块响应和定时器示例代码
2017/03/19 NodeJs
JS简单封装的图片无缝滚动效果示例【测试可用】
2017/03/22 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
2017/07/13 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
深入剖析Node.js cluster模块
2018/05/23 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
在layui框架中select下拉框监听更改事件的例子
2019/09/20 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
2020/04/13 Javascript
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
Django内容增加富文本功能的实例
2017/10/17 Python
在python2.7中用numpy.reshape 对图像进行切割的方法
2018/12/05 Python
Python对excel文档的操作方法详解
2018/12/10 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
使用PyCharm官方中文语言包汉化PyCharm
2020/11/18 Python
Python 实现进度条的六种方式
2021/01/06 Python
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
移动通信专业自荐信范文
2013/11/12 职场文书
科学发展观活动总结
2014/08/28 职场文书
英文产品推荐信
2015/03/27 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
小学生读书笔记
2015/07/01 职场文书
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android