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 相关文章推荐
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
Feb 03 Javascript
懒就要懒到底——鼠标自动点击(含时间判断)
Feb 20 Javascript
js中自定义方法实现停留几秒sleep
Jul 11 Javascript
jquery取子节点及当前节点属性值的方法
Sep 09 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
jQuery实现自定义checkbox和radio样式
Jul 13 Javascript
Vue.js计算属性computed与watch(5)
Dec 09 Javascript
js判断PC端与移动端跳转
Dec 24 Javascript
javascript内存分配原理实例分析
Apr 10 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
用JS实现选项卡
Mar 23 Javascript
JS实现扫雷项目总结
May 19 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之第六天
2006/10/09 PHP
PHP+DBM的同学录程序(3)
2006/10/09 PHP
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
php上传图片之时间戳命名(保存路径)
2014/08/15 PHP
一个完整的php文件上传类实例讲解
2015/10/27 PHP
php实现学生管理系统
2020/03/21 PHP
Alliance vs AM BO3 第二场2.13
2021/03/10 DOTA
常用js脚本
2006/12/03 Javascript
Javascript条件判断使用小技巧总结
2008/09/08 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
简单的js表单验证函数
2013/10/28 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
基于jquery编写分页插件
2016/03/07 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
2018/08/25 Javascript
javascript中floor使用方法总结
2019/02/02 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
使用Python实现BT种子和磁力链接的相互转换
2015/11/09 Python
python实现机器学习之多元线性回归
2018/09/06 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
豪华床上用品、床单和浴室必需品:Peacock Alley
2019/09/04 全球购物
自荐信的格式
2014/03/10 职场文书
留学推荐信范文
2014/05/10 职场文书
关于爱国的标语
2014/06/24 职场文书
初中毕业生自我评价
2015/03/02 职场文书
多属性、多分类MySQL模式设计
2021/04/05 MySQL
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL