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接收Date类型的数据时会把数据转换为时间戳
复制代码 代码如下: $("#test").click(function(e) { $.get( "/mgr/datacleaning/test", function(data) { console.log(data + " from $.get()"); } ); var xhr = new XMLHttpRequest(); xhr.open("GET", "/mgr/datacleaning/test"
-
Ajax发送和接收二进制字节流数据的方法
HTML5 Ajax 2.0标准中,增强了Ajax的许多功能,包括发送FormData数据,上传数据进度条等诸多功能.但实际上,Ajax可以字节发送二进制数据. 发送二进制数据 var oReq = new XMLHttpRequest(); oReq.open("POST", url, true); oReq.onload = function (oEvent) { // Uploaded. }; var blob = new Blob(['abc123'], {type: 'tex
-
ThinkPHP中使用ajax接收json数据的方法
本文实例讲述了ThinkPHP中使用ajax接收json数据的方法.分享给大家供大家参考.具体分析如下: 这里通过ThinkPHP+jquery实现ajax,扩展了下,写了个查询,前台代码如下: 首先需要引入jquery.js,主要代码如下: 复制代码 代码如下: function ajax(id,pic){ //由于ThinkPHP不解析JavaScript里的ThinkPHP常量,所以需要先在这里定义. var URL='__URL__'; $.ajax({
-
编码为GB2312网站让AJAX接收的数据显示支持中文
复制代码 代码如下: <script> var xmlHttp; var BrowerType="ie"; function createXML(){ try{ xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){ try{ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e2) { xmlHttp =f
-
AJAX如何接收JSON数据示例介绍
简介 在我们了解如何使用AJAX返回JSON数据的时候要先明白下列几点 1. JSON如何来表示对象的 2. JSON如何来表示数组的 复制代码 代码如下: var object = { "labId": "1", "labName": "服装" }; 通常我们使用如上的方式来表示JSON对象,那么数组呢 复制代码 代码如下: var array = [{ "labId": "1", &
-
jquery的ajax异步请求接收返回json数据实例
jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以. 代码示例如下: 复制代码 代码如下: $('#send').click(function () { $.ajax({ type : "GET", url : "a.php", dataType : "json
-
jQuery Ajax请求后台数据并在前台接收
1.前台使用jQuery ajax请求 $.ajax({ url: "r_getRolePer.action", dataType:'json', data: {userId:"1"}, //请求的附加参数,用json对象 method:'POST', success: function(data){ $.messager.alert('消息',data.add,''); //这里使用的时easyui的格式 }, }); 2.在action里面使用response.
-
ajax接收后台数据在html页面显示
Java代码 PrintWriter out=response.getWriter(); //向客户端发送字符数据 response.setContentType("text/text"); //设置请求以及响应的内容类型以及编码方式 response.setCharacterEncoding("UTF-8"); JSONArray json = JSONArray.fromObject(newsList); //将newsList对象转换为json对象 Strin
-
使用ajax接收后台发送过来的json数据方法
今天给大家带来一个简单的使用ajax接收后台返回json格式的demo 废话不多说直接上代码 后台代码 package com.sidan.outjson; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpSe
-
vue使用ajax获取后台数据进行显示的示例
实例如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/vue.min.js"></script> <script src="/vue-resource.min.js"&g
-
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
本文实例讲述了TP5(thinkPHP5)框架基于ajax与后台数据交互操作.分享给大家供大家参考,具体如下: Ajax最大的一点是页面无刷新,在页面内与服务器通信,给用户的体验非常好.可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本.并且减轻服务器的负担,ajax的原则是"按需取数据",可以最大程度的减少冗余请求,和响应对服务器造成的负担. 最近在用tp5开发企业微应用,很有收获,觉得最需要注意的是thinkphp
-
asp.net中在用ajax格式传递数据到aspx页面时出现乱码
asp.net中在用ajax格式传递数据到aspx页面时有时会出现乱码,以下为解决方法 js中 : 复制代码 代码如下: XmlHttp.open("POST", "test.aspx", false); XmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); XmlHttp.send("QueryName=&quo
-
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Object.success,但后台能够返回数据,原代码如下: var source=[]; $.ajax({ type: "post", url: "connectdb/select.jsp", data: {database: "scmdb", selec
-
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
需求分析 1)需要首页,末页功能 2)有点击查看上一页,下一页功能 3)页码到当前可视页码最后一页刷新页面 实现思路 也是分为三部分处理 1)点击首页,末页直接显示第一页或者最后一页内容,当前页面为第1页或者最后一页.隐藏首页或者末页按钮.demo 显示截图 首页状态 和 末页状态代码执行结果截图 2)点击可视页码截图 3)点击上一页或者下一页,,需要刷新页码状态时截图,昨天表示当前页码为7,右图是点击上一页,刷新页码时的状态 代码参数说明 <script src="js/jquery-1
-
Vue Router根据后台数据加载不同的组件实现
目录 实际项目中遇到的需求 有一些不好的实现方式 个人感觉比较好的实现方式 功能已实现,但我又开始了新的思考 最终方案--高阶组件 实际项目中遇到的需求 同一个链接需要加载不同的页面组件.根据用户所购买服务的不同,有不同的页面展现. 有一些不好的实现方式 直接把这几个组件写在同一个组件下,通过v-if去判断.如果这么做的话,甚至可以不使用vue-router,直接把所有组件,都写在一个文件里面,全部通过v-if判断,也是可行的.(前提是几万行代码一起,你不嫌麻烦的话) 在渲染这个链接的时候,直接
随机推荐
- JS实现六位字符密码输入器功能
- javascript Array数组对象的扩展函数代码
- 一个简单的实现下拉框多选的插件可移植性比较好
- Vue实现动态显示textarea剩余字数
- React Native实现进度条弹框的示例代码
- VBScript之通过对比注册表查找隐藏的服务
- Django中处理出错页面的方法
- win7系统配置php+Apache+mysql环境的方法
- python基于pygame实现响应游戏中事件的方法(附源码)
- php实现用手机关闭计算机(电脑)的方法
- jQuery实现仿腾讯迷你首页选项卡效果代码
- android开发教程之view组件添加边框示例
- CentOS MySQL 5.7编译安装步骤详细说明
- 数据库中union 与union all 的区别
- vue单页应用中如何使用jquery的方法示例
- ASP保存远程图片到本地 同时取得第一张图片并创建缩略图的代码
- java使用颜色选择器示例分享
- ASP.NET MVC4入门教程(一):入门介绍
- 手机邮融入移动商务 企业营销更快人一步
- Android开发中的文件操作工具类FileUtil完整实例