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页面显示的更多相关文章

  1. html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感)

    html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感) 效果图: 运行原理和技术: 当页面加载完毕,利用jquery向后台发送ajax请求,去后台拼接<select>&l ...

  2. js页面用定时任务通过AJAX获取后台数据,但是从这个页面跳转到其他页面后,定时任务仍然在定时请求后台

    setInterval(function(){//ajax 请求后台数据},1000);这个是A页面的定时器然后我在A页面通过其他请求跳转到其他页面之后后台发现A页面的定时器的那个请求仍然在执行为什么 ...

  3. Ajax请求后台数据

    一.前期准备 安装好XAMPP软件,并运行起来.本文代码是基于XAMPP开发环境,XAMPP是完全免费且易于安装的Apache发行版,其中包含MariaDB.PHP和Perl.XAMPP开放源码包的设 ...

  4. ThinkPHP中使用ajax接收json数据的方法

    本文实例讲述了ThinkPHP中使用ajax接收json数据的方法.分享给大家供大家参考.具体分析如下: 这里通过ThinkPHP+jquery实现ajax,扩展了下,写了个查询,前台代码如下: 首先 ...

  5. ajax 请求后台数据返回异常 及 提示404方法名不存在

    1.正常使用 Ajax 调取后台数据时,提示方法名不存在,Ajax前端正常,方法类bean注入正常,方法注解正常.但参数解析时出现异常. @RequestMapping(value="/ge ...

  6. 用ajax获取后台数据,返回json数据,怎么在前台使用?

    用ajax获取后台数据,返回json数据,怎么在前台使用呢?后台 C# code   ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == &qu ...

  7. 前台返回json数据的常用方式+常用的AJAX请求后台数据方式

    我个人开发常用的如下所示: 之所以像下面这样下,一是前台Ajax,二是为安卓提供接口数据 现在常用的是返回JSON数据,XML的时代一去不复返 JSON相对于XML要轻量级的多 对JSON不是十分熟悉 ...

  8. JS 操作 HTML 和 AJAX 请求后台数据

    为某个元素插入值,添加属性,添加子元素 <div class="col-sm-6"> <select class="form-control" ...

  9. jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法

    jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...

随机推荐

  1. 浅谈JavaScript的事件(事件委托)

    事件处理程序为Web程序提供了系统交互,但是如果页面中的事件处理程序太多,则会影响页面的性能.每个函数都是对象,都会占用内存,内存中对象越多,性能越差.需要事先为DOM对象指定事件处理程序,导致访问D ...

  2. 超低功耗、无需网关,CSR智能家居蓝牙控制照明方案

    本文转载至 http://blog.csdn.net/justinjing0612/article/details/39250997 [导读] iOS 8 Beta2终于让智能家居HomeKit功能露 ...

  3. Java实现HttpClient发送GET、POST请求(https、http)

    1.引入相关依赖包 jar包下载:httpcore4.5.5.jar    fastjson-1.2.47.jar maven: <dependency> <groupId>o ...

  4. Struts2的工作原理(图解)详解

    Struts2的工作原理 上图来源于Struts2官方站点,是Struts 2 的整体结构. 一个请求在Struts2框架中的处理大概分为以下几个步骤(可查看源码:https://github.com ...

  5. LCS的几种求法

    \(LCS:\) 对于两个长度均为 \(N\) 的数列 \(A\) 和 \(B\) ,存在一个数列 \(C\) 使得 \(C\) 既是 \(A\) 的子序列有事 \(B\) 的子序列,现在需要求这个数 ...

  6. RabbitMQ 使用

    安装步骤略过. 启动 启动很简单,找到安装后的 RabbitMQ 所在目录下的 sbin 目录,可以看到该目录下有6个以 rabbitmq 开头的可执行文件,直接执行 rabbitmq-server ...

  7. 修改STM32库函数中的晶振值

    STM32F407的库文件中默认晶振值为25MHz,若外接晶振8MHz,则需修改以下几个地方: 1)修改HSE_VALUE的值 将#define HSE_VALUE ((uint32_t)250000 ...

  8. react native 中的ListView

    ListView 的运用: 1.首先在react native中引入这个组件: 2.初始化的ListView 的相关属性: constructor(props) { super(props); con ...

  9. Pycharm中如何安装python库

    1首先打开pycharm工具,选择File中的Setting选项,如下图所示 2在打开的setting界面中我们点击python的解释器,你会看到很多导入的第三方库,如下图所示,点击最右边的加号 3在 ...

  10. I.MX6 不一定要设置BOOT_MODE进入烧录模式

    /************************************************************************* * I.MX6 不一定要设置BOOT_MODE进入 ...