用easyui从servlet传递json数据到前端页面的两种方法
用easyui从servlet传递json数据到前端页面的两种方法
两种方法获取的数据在servlet层传递的方法相同,下面为Servlet中代码,以查询表中所有信息为例。
//重写doGet方法
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("UTF-8");//防止request请求时中文数据出现乱码
String flag = request.getParameter("flag");//通过flag值判定增删改查操作
if(flag == null) {
queryOffer(request,response);
}else if("add".equals(flag)){
addOffer(request,response);
}else if("del".equals(flag)) {
deleteOffer(request,response);
}else if("update".equals(flag)) {
updateOffer(request,response);
}
}
//处理从数据库查询到的数据以返回前端
protected void queryOffer(HttpServletRequest request, HttpServletResponse response) {
// TODO Auto-generated method stub
List<Offer> offers = new ArrayList<Offer>();
offers = offerservice.queryOfferService();
try {
String str=JSONArray.toJSONString(offers);//将数据库查询到的集合转换成JSON字符串
System.out.println(str);
response.setContentType("text/html;charset=utf-8");//防止response时中文数据乱码
response.getWriter().print(str);//向前台传递字符串
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
通过easyui包含的
table
标签中的属性来获取后端传递的数据jsp代码:
url
:传递数据的地址(本篇使用的是servlet,所以路径为servlet路径;也可以使用action或者php)field
:传递的JSON数据的字段名称,就是数据库的字段(列名)
<table id="dg" title="用户列表" class="easyui-datagrid" style="width:80%;height:250px"
url="<%=request.getContextPath() %>/OfferServlet"
toolbar="#toolbar"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="offerid" width="50">商品ID</th>
<th field="offername" width="100">商品名称</th>
<th field="offertype" width="200">商品类型</th>
<th field="offerdesc" width="200">商品描述</th>
<th field="price" width="200">商品价格</th>
</tr>
</thead>
</table>通过JS来传递JSON数据到前端
jsp代码:
<table id="dg" title="用户列表" class="easyui-datagrid" style="width:1000px;height:250px" toolbar="#toolbar">
</table>js代码:
title
:显示的表格列名
$(function(){
$('#dg').datagrid({
url:"${pageContext.request.contextPath}/OfferServlet",//servlet路径
columns:[[
{field:'offerid',title:'商品ID',width:100},
{field:'offername',title:'商品名称',width:100},
{field:'offertype',title:'商品类型',width:100},
{field:'offerdesc',title:'商品描述',width:300},
{field:'price',title:'商品价格',width:150}
]]
});
});
用easyui从servlet传递json数据到前端页面的两种方法的更多相关文章
- javascript获取json对象的key名称的两种方法
javascript获取json对象的key名称的两种方法 数据处理中,你可能接收到一个不确定内容格式的json对象,然后要把key的值提取出来.今天试过两种可以提取json key的方法,均可以正常 ...
- oracle数据的导入导出(两种方法三种方式)
大概了解数据库中数据的导入导出.在oracle中,导入导出数据的方法有两种,一种是使用cmd命令行的形式导入导出数据,另一种是使用PL/SQL工具导入导出数据. 1,使用cmd命令行导入导出数据 1. ...
- iOS开发小技巧--边接受数据边写入文件的两种方法
一.NSFileHanle 使用注意点:在往文件写入数据时,必须创建一个空的文件 指定文件写入的方式 -- 覆盖还是追加 最后记得关闭 <1>代码是在大文件传输的练习中截取的.写入数据之前 ...
- C#将DataTable数据导出到EXCEL的两种方法
1.在非服务器控件的页面导出数据,需要借助一张temp空页面post回后台的数据. 前台:window.location.href = "../Temp.aspx"; 后台: tr ...
- C# web api 返回类型设置为json的两种方法
每次写博客,第一句话都是这样的:程序员很苦逼,除了会写程序,还得会写博客!当然,希望将来的一天,某位老板看到此博客,给你的程序员职工加点薪资吧!因为程序员的世界除了苦逼就是沉默.我眼中的程序员大多都不 ...
- C# web api返回类型设置为json的两种方法
web api写api接口时默认返回的是把你的对象序列化后以XML形式返回,那么怎样才能让其返回为json呢,下面就介绍两种方法: 方法一:(改配置法) 找到Global.asax文件,在Applic ...
- 通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来的Json数据写入数据库表中
摘自:http://blog.csdn.net/mazhaojuan/article/details/8592015 通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来 ...
- ajax请求、servlet返回json数据
ajax请求.servlet返回json数据 1.方式一 response.setcontenttype("text/html;charset=utf-8"); response. ...
- Ajax传递json数据简介和一个需要注意的小问题
Ajax传递json数据 Ajax操作与json数据格式在实际中的运用十分广泛,本文为大家介绍一个两者相结合的小案例: 项目结构 我们新建一个Django项目,在里面创建一个名为app01的应用: p ...
随机推荐
- chmod/chown/chgrp/chattr
权限组合其实就是二进制的组合 注意,用户只能修改属于自己的文件 仅管理员可以修改文件的数组和属主 chmod 三种使用方法 文件的特殊权限 SUID SGID Sticky chowm 修改文件,目录 ...
- Log4net 控制台打印日志(二)
1.创建控制台程序 2.用NuGet添加log4net引用 3.添加应用程序配置文件:App.config 4.添加配置信息: <?xml version="1.0" enc ...
- 79: cf 444E 并查集+思维
$des$ 题面 $sol$ 把边从小到大排序,枚举每条边作为答案,然后把两个点合并,判断每条边是否可以作为答案时,$cnt_i$ 表示节点 $i$ 已经合并的 $x$ 之和$size_i$ 表示已经 ...
- C++通过迭代修改字符串本身(auto类型说明符)
以字符串这种支持 for (declaration : expression) statement 这样for语句迭代的数据结构为例,我们看看auto关键字在类型推断中的作用. string s = ...
- element ui分页器的使用
<el-pagination layout="total, prev, pager, next, jumper" :current-page="pageInfo.p ...
- JS filter的使用
定义和用法 filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素. 注意: filter() 不会对空数组进行检测. 注意: filter() 不会改变原始数组 ...
- 算法练习题---罗马数字转int
连接:https://leetcode-cn.com/problems/roman-to-integer/submissions/ 题目: 罗马数字包含以下七种字符: I, V, X, L,C,D 和 ...
- 集合类 collection接口 ArrayList
数组: 存储同一种数据类型的集合容器.数组的特点:1. 只能存储同一种数据类型的数据.2. 一旦初始化,长度固定. 3. 数组中的元素与元素之间的内存地址是连续的. : Object类型的数组可以存储 ...
- 第07组 Beta冲刺(2/5)
队名:摇光 队长:杨明哲 组长博客:求戳 作业博客:求再戳 队长:杨明哲 过去两天完成了哪些任务 文字/口头描述:代码编辑器 展示GitHub当日代码/文档签入记录:(组内共用,已询问过助教小姐姐) ...
- js中isNaN和Number.isNaN的区别
isNaN 当我们向isNaN传递一个参数,它的本意是通过Number()方法尝试将这参数转换成Number类型,如果成功返回false,如果失败返回true. 所以isNaN只是判断传入的参数是否能 ...