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 ajax对特殊字符进行转义防止js注入使用示例
Nov 21 Javascript
jquery获取节点名称
Apr 26 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
基于javascript实现窗口抖动效果
Jan 03 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
Mar 06 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
Bootstrap模态对话框用法简单示例
Aug 31 Javascript
vue 移动端适配方案详解
Nov 15 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 Javascript
基于JS实现简单滑块拼图游戏
Oct 12 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在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
字符串长度函数strlen和mb_strlen的区别示例介绍
2014/09/09 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
JSChart轻量级图形报表工具(内置函数中文参考)
2010/10/11 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
2018/02/08 Javascript
electron制作仿制qq聊天界面的示例代码
2018/11/26 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
python文件与目录操作实例详解
2016/02/22 Python
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
基于Django用户认证系统详解
2018/02/21 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
Python笔记之facade模式
2019/11/20 Python
Python编译成.so文件进行加密后调用的实现
2019/12/23 Python
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
兰蔻美国官网:Lancome美国
2017/04/25 全球购物
澳大利亚旅游网站:Lastminute
2017/08/07 全球购物
英国家用电器折扣网站:Electrical Discount UK
2018/09/17 全球购物
小学网上祭英烈活动总结
2014/07/05 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
七年级思品教学反思
2016/02/20 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers
postgresql无序uuid性能测试及对数据库的影响
2021/06/11 PostgreSQL
Java输出Hello World完美过程解析
2021/06/13 Java/Android