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 相关文章推荐
基于逻辑运算的简单权限系统(实现) JS 版
Mar 24 Javascript
js停止输出代码
Jul 20 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
jQuery基础语法实例入门
Dec 23 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 Javascript
再谈javascript常见错误及解决方法
Sep 16 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
Nov 09 Javascript
JS大坑之19位数的Number型精度丢失问题详解
Apr 22 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
Jun 07 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
Oct 30 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
Smarty+QUICKFORM小小演示
2007/02/25 PHP
使用PHP导出Word文档的原理和实例
2013/10/21 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
js查找父节点的简单方法
2008/06/28 Javascript
Prototype Date对象 学习
2009/07/12 Javascript
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
2010/04/01 Javascript
当jQuery1.7遇上focus方法的问题
2014/01/26 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
如何解决vue与传统jquery插件冲突
2017/03/20 Javascript
微信小程序表单验证功能完整实例
2017/12/01 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
微信小程序实现简单的select下拉框
2020/11/23 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
python完成FizzBuzzWhizz问题(拉勾网面试题)示例
2014/05/05 Python
Python中的__slots__示例详解
2017/07/06 Python
利用django如何解析用户上传的excel文件
2017/07/24 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
python调用matlab的m自定义函数方法
2019/02/18 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
解决pyshp UnicodeDecodeError的问题
2019/12/06 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
Python如何批量生成和调用变量
2020/11/21 Python
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
会计助理的岗位职责
2013/11/29 职场文书
草船借箭教学反思
2014/02/03 职场文书
党员大会主持词
2014/04/02 职场文书
幼师求职信
2014/06/23 职场文书
安全教育的主题班会
2015/08/13 职场文书