【Ajax】接收后台数据在html页面显示
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中文乱码
【Ajax】接收后台数据在html页面显示的更多相关文章
- html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感)
html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感) 效果图: 运行原理和技术: 当页面加载完毕,利用jquery向后台发送ajax请求,去后台拼接<select>&l ...
- js页面用定时任务通过AJAX获取后台数据,但是从这个页面跳转到其他页面后,定时任务仍然在定时请求后台
setInterval(function(){//ajax 请求后台数据},1000);这个是A页面的定时器然后我在A页面通过其他请求跳转到其他页面之后后台发现A页面的定时器的那个请求仍然在执行为什么 ...
- Ajax请求后台数据
一.前期准备 安装好XAMPP软件,并运行起来.本文代码是基于XAMPP开发环境,XAMPP是完全免费且易于安装的Apache发行版,其中包含MariaDB.PHP和Perl.XAMPP开放源码包的设 ...
- ThinkPHP中使用ajax接收json数据的方法
本文实例讲述了ThinkPHP中使用ajax接收json数据的方法.分享给大家供大家参考.具体分析如下: 这里通过ThinkPHP+jquery实现ajax,扩展了下,写了个查询,前台代码如下: 首先 ...
- ajax 请求后台数据返回异常 及 提示404方法名不存在
1.正常使用 Ajax 调取后台数据时,提示方法名不存在,Ajax前端正常,方法类bean注入正常,方法注解正常.但参数解析时出现异常. @RequestMapping(value="/ge ...
- 用ajax获取后台数据,返回json数据,怎么在前台使用?
用ajax获取后台数据,返回json数据,怎么在前台使用呢?后台 C# code ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == &qu ...
- 前台返回json数据的常用方式+常用的AJAX请求后台数据方式
我个人开发常用的如下所示: 之所以像下面这样下,一是前台Ajax,二是为安卓提供接口数据 现在常用的是返回JSON数据,XML的时代一去不复返 JSON相对于XML要轻量级的多 对JSON不是十分熟悉 ...
- JS 操作 HTML 和 AJAX 请求后台数据
为某个元素插入值,添加属性,添加子元素 <div class="col-sm-6"> <select class="form-control" ...
- jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...
随机推荐
- 距特征之k阶距概念
k阶原点距和k阶中心距各是说明什么数字特征 http://www.cnblogs.com/emanlee/archive/2011/04/25/2028628.html 二阶中心距,也叫作方差,它告诉 ...
- HDU 3639 Hawk-and-Chicken
Hawk-and-Chicken Time Limit: 6000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- LeetCode 226 Invert Binary Tree(转换二叉树)
翻译 将下图中上面的二叉树转换为以下的形式.详细为每一个左孩子节点和右孩子节点互换位置. 原文 如上图 分析 每次关于树的题目出错都在于边界条件上--所以这次细致多想了一遍: void swapNod ...
- SimpleHTTPServer
SimpleHTTPServer python -m SimpleHTTPServer 8989
- Maven group, artifact or version defined in the pom file do not match the file ...
在把library上传到bintray空间的时候报以下错误 Could not upload to 'https://api.bintray.com/content/ping/maven/comm-a ...
- Ural 1635 Mnemonics and Palindromes(DP)
题目地址:space=1&num=1635">Ural 1635 又是输出路径的DP...连着做了好多个了. . 状态转移还是挺简单的.要先预处理出来全部的回文串,tag[i] ...
- js中的逻辑与(&&)与逻辑或(||)
var foo = 1; var bar = 0; var tar = false; var baz = 2; 一.js中的逻辑与(&&) 1.当第一个数为true时,返回第二个数: ...
- MyBatis学习 之 三、SQL语句映射文件(2)增删改查、参数、缓存
2.2 select 一个select 元素非常简单.例如: <!-- 查询学生,根据id --> <select id="getStudent" paramet ...
- 【前端】Element-UI 省市县级联选择器 JSON数据
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/element_cascader.html 不想自己处理的就直接下载吧 http://shamoyuu.bj.bce ...
- List集合与Array数组之间的互相转换
1.数组转换成List集合 采用java中集合自带的asList()方法就可以完成转换了 String[] array = new String[] {"zhu", "w ...