• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > ajax接收后台数据在html页面显示

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

作者:BobCoder 字体:[增加 减小] 来源:互联网 时间:2017-05-11

BobCoder通过本文主要向大家介绍了ajax获取后台json数据,ajax获取后台数据,ajax请求后台数据,ajax调用后台方法,ajax与后台交互等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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字符传输到前台 
 </div>

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内容
 },
})
})
</div>

HTML页面

<ul id="ulul"></ul>

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

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

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

相关文章

  • 2017-05-11JS表格组件神器bootstrap table使用指南详解
  • 2017-05-11Bootstrap实现提示框和弹出框效果
  • 2017-05-11jquery仿ps颜色拾取功能
  • 2017-05-11jquery easyui dataGrid动态改变排序字段名的方法
  • 2017-05-11Angular中实现树形结构视图实例代码
  • 2017-05-11jquery表单验证插件validation使用方法详解
  • 2017-05-11BootStrap3中模态对话框的使用
  • 2017-05-11jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
  • 2017-05-11基于jQuery实现火焰灯效果导航菜单
  • 2017-05-11vue.js 1.x与2.0中js实时监听input值的变化

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 微信小程序实战之上拉(分页加载)效果(2)
    • jQuery Plupload上传插件的使用
    • 基于jQuery实现火焰灯效果导航菜单
    • 实现一个简单的vue无限加载指令方法
    • angular中实现控制器之间传递参数的方式
    • 详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
    • jQuery+ajax的资源回收处理机制分析
    • JS中SetTimeout和SetInterval使用初探
    • Jquery实现跨域异步上传文件总结
    • Linux使用Node.js建立访问静态网页的服务实例详解

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有