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 相关文章推荐
jquery提示效果实例分析
Nov 25 Javascript
jQuery中:lt选择器用法实例
Dec 29 Javascript
每天一篇javascript学习小结(Function对象)
Nov 16 Javascript
JavaScript知识点整理
Dec 09 Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 Javascript
jquery拼接ajax 的json和字符串拼接的方法
Mar 11 Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
VUE DOM加载后执行自定义事件的方法
Sep 07 Javascript
微信小程序封装多张图片上传api代码实例
Dec 30 Javascript
在weex中愉快的使用scss的方法步骤
Jan 02 Javascript
ES6 Object.assign()的用法及其使用
Jan 18 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制作简单的内容采集器的原理分析
2008/10/01 PHP
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
PHP加Nginx实现动态裁剪图片方案
2014/03/10 PHP
PHP4和PHP5版本下解析XML文档的操作方法实例分析
2017/05/20 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
2015/02/03 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
js创建数组的简单方法
2016/07/27 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
Bootstrap响应式表格详解
2017/05/23 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
纯异步nodejs文件夹(目录)复制功能
2019/09/03 NodeJs
JS使用正则表达式判断输入框失去焦点事件
2019/10/16 Javascript
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python的lambda匿名函数的简单介绍
2013/04/25 Python
详解Python中的序列化与反序列化的使用
2015/06/30 Python
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
详解python里的命名规范
2018/07/16 Python
Python3.7 新特性之dataclass装饰器
2019/05/27 Python
django框架模板语言使用方法详解
2019/07/18 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
社区志愿者心得体会
2014/01/03 职场文书
《美丽的南沙群岛》教学反思
2014/04/27 职场文书