使用easyui从servlet传递json数据到前端页面的两种方法


Posted in Javascript onSeptember 05, 2019

 两种方法获取的数据在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 相关文章推荐
jQuery EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
Dec 28 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 Javascript
js自定义select下拉框美化特效
May 12 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
Jun 20 Javascript
使用vue-router设置每个页面的title方法
Feb 11 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 Javascript
从0到1搭建element后台框架优化篇(打包优化)
May 12 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
vue filter 完美时间日期格式的代码
Aug 14 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 #Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 #Javascript
javascript之分片上传,断点续传的实际项目实现详解
Sep 05 #Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 #Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 #Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 #Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 #Javascript
You might like
如何选购合适的收音机
2021/03/01 无线电
php下使用无限生命期Session的方法
2007/03/16 PHP
5种PHP创建数组的实例代码分享
2014/01/17 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
jquery text()要注意啦
2009/10/30 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
2017/01/18 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
原生js实现Flappy Bird小游戏
2018/12/24 Javascript
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
Python实现简单的语音识别系统
2017/12/13 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
Python中创建二维数组
2018/10/17 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
pyhton中__pycache__文件夹的产生与作用详解
2019/11/24 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
python剪切视频与合并视频的实现
2020/03/03 Python
keras打印loss对权重的导数方式
2020/06/10 Python
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
科技馆观后感
2015/06/08 职场文书
小英雄雨来观后感
2015/06/09 职场文书
《日月潭》教学反思
2016/02/20 职场文书
redis内存空间效率问题的深入探究
2021/05/17 Redis
MySQL的全局锁和表级锁的具体使用
2021/08/23 MySQL
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS
Windows server 2012 配置Telnet以及用法详解
2022/04/28 Servers