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 相关文章推荐
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
Apr 12 Javascript
js 禁用浏览器的后退功能的简单方法
Dec 10 Javascript
javascript 简练的几个函数
Aug 29 Javascript
基于jQuery的ajax功能实现web service的json转化
Aug 29 Javascript
javascript创建和存储cookie示例
Jan 07 Javascript
用javascript读取xml文件读取节点数据
Aug 12 Javascript
JavaScript Date对象详解
Mar 01 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
Mar 22 Javascript
AngularJS表单详解及示例代码
Aug 17 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 Javascript
vue实现浏览器全屏展示功能
Nov 27 Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
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
为什么那些咖啡爱好者大多看不上连锁咖啡店?
2021/03/06 咖啡文化
php 分页类 扩展代码
2009/06/11 PHP
MYSQL 小技巧 -- LAST_INSERT_ID
2009/11/24 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
CI框架的安全性分析
2016/05/18 PHP
php获取给定日期相差天数的方法分析
2017/02/20 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
2015/06/12 Javascript
JavaScript事件类型中UI事件详解
2016/01/14 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
js使用i18n实现页面国际化的方法
2017/05/09 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
基于vue1和vue2获取dom元素的方法
2018/03/17 Javascript
js中的数组对象排序分析
2018/12/11 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
[01:07:17]EG vs Optic Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
零基础写python爬虫之神器正则表达式
2014/11/06 Python
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
python3中str(字符串)的使用教程
2017/03/23 Python
Python中的函数作用域
2018/05/07 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
Python xlrd excel文件操作代码实例
2020/03/10 Python
Python run()函数和start()函数的比较和差别介绍
2020/05/03 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
Css3实现无缝滚动防抖
2020/09/14 HTML / CSS
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
2014大学生全国两会学习心得体会
2014/03/13 职场文书
临床专业自荐信
2014/06/22 职场文书
简单租房协议书范本
2014/08/20 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
乡镇党委书记个人整改措施
2014/09/15 职场文书
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js