ajax接收后台数据在html页面显示

Java代码

1         PrintWriter out=response.getWriter();       //向客户端发送字符数据
2         response.setContentType("text/text");          //设置请求以及响应的内容类型以及编码方式
3         response.setCharacterEncoding("UTF-8");
4         JSONArray  json = JSONArray.fromObject(newsList);   //将newsList对象转换为json对象
5         String str = json.toString();                //将json对象转换为字符串
6         out.write(str);                     //将str字符传输到前台       

Ajax代码

 1  $(document).ready(function() {
 2     $.ajax({
 3     url : "newsservlet",//请求地址
 4     dataType : "json",//数据格式
 5     type : "post",//请求方式
 6     async : false,//是否异步请求
 7     success : function(data) {   //如何发送成功
 8     var html = "";
 9     for(var i=0;i<data.length;i++){    //遍历data数组
10             var ls = data[i];
11             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>";
12         }
13         $("#ulul").html(html); //在html页面id=ulul的标签里显示html内容
14     },
15 })
16 })

 HTML页面

1   <ul id="ulul">
2
3              </ul>

在ajax中,"#"代表的是一个标签的id,"."代表的是一个标签的class

在Java后台, 设置请求以及响应的内容类型以及编码方式  必须写在 json对象转换字符串 之前 ,否则会造成json中文乱码

时间: 2024-07-30 13:50:08

ajax接收后台数据在html页面显示的相关文章

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

html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感) 效果图: 运行原理和技术: 当页面加载完毕,利用jquery向后台发送ajax请求,去后台拼接<select></select>中的option字符串.让后将字符串响应回来,动态添加到<select>中.其中的字符串中包含了后台的数据. 页面js代码: 1 <script type="text/javascript"> 2 //加载部门 3 function loa

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

setInterval(function(){//ajax 请求后台数据},1000);这个是A页面的定时器然后我在A页面通过其他请求跳转到其他页面之后后台发现A页面的定时器的那个请求仍然在执行为什么会出现这种情况呢?怎么能让我跳转到其他页面之后定时任务不执行呢? yj327243832 | 浏览 1987 次  2014-08-22 17:26 2014-08-23 11:03 最佳答案 个人感觉如果A页面已经跳转到其他页面,那么那个定时器的请求应该不会再被执行,因为A页面在浏览器中应该已经被

vue实战使用ajax请求后台数据(小白)

vue实战使用ajax请求后台数据(小白) 前言:前端小白入门到这个阶段,应该会知道我们所做的页面上那些数据,绝大部分都不是静态的数据,而是通过调用后台接口把数据渲染到页面上的效果.ajax可以帮助我们更好的去实现这一点,下面是详解在vue中如何使用它. vue本身它是不支持直接发送ajax请求的,需要用到axios(一个基于promise的HTTP库,可以用在浏览器和node.js中)这是Axios文档的介绍,详细可查看:https://www.kancloud.cn/yunye/axios/

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

1.正常使用 Ajax 调取后台数据时,提示方法名不存在,Ajax前端正常,方法类bean注入正常,方法注解正常.但参数解析时出现异常. @RequestMapping(value="/getProject") @ResponseBody public Map<String,Object> getProject(@RequestBody Map<String, Object> paraMap,HttpServletRequest request){ Map<

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

本文实例讲述了ThinkPHP中使用ajax接收json数据的方法.分享给大家供大家参考.具体分析如下: 这里通过ThinkPHP+jquery实现ajax,扩展了下,写了个查询,前台代码如下: 首先需要引入jquery.js,主要代码如下: 1 function ajax(id,pic){ 2 3 //由于ThinkPHP不解析JavaScript里的ThinkPHP常量,所以需要先在这里定义. 4 5 var URL='__URL__'; 6 7 $.ajax({ 8 9 url: URL+

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

用ajax获取后台数据,返回json数据,怎么在前台使用呢? 后台 C# code ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == "SearchCustomer")                 {                     int ID;                     if (Int32.TryParse(CustomerID, out ID))                     {    

ajax请求得到后台数据,前台页面不用拼接 “字符串和HTML表格标签”,使用方便模板然后clone,显示表格

<%@page import="java.util.ArrayList"%><%@page import="java.util.List"%><%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%><%@ taglib uri="htt

使用原生ajax访问后台数据并将其展现在前端页面中(小菜鸟自己整理玩的,大神勿喷)

首先你要有php的环境,关于php环境的搭建,php本地站点的搭建,此处不再重复请看这里:http://www.cnblogs.com/Gabriel-Wei/p/5950465.html我们把wamp打开,并且在Dreamweaver里面新建一个phpStudy站点.这篇文章我们需要两个文件,一个test.html前端的页面,一个tigong.php数据的提供页,下面分别进行介绍. tigong.php我们在Dreamweaver,phpStudy站点下面,新建一个tigong.php页面,里

Ajax异步加载后台数据(换页面,加强用户体验所用)

主页面代码,转向需要显示数据的页面 <a href="user/index">用户维护</a>  基于ssm框架的后端控制器代码,接收前端请求,转向预定的页面 @RequestMapping("/index") public String index() { return "user/index"; } 这个时候就要在index.jsp中使用Ajax加载数据,使用Ajax向后端控制器发出要求,需要在index中定义一个方法