使用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 相关文章推荐
Javascript学习笔记5 类和对象
Jan 11 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
js实现瀑布流的三种方式比较
Jun 28 Javascript
js友好的时间返回函数
Aug 24 Javascript
AngularJS 单元测试(二)详解
Sep 21 Javascript
bootstrap精简教程_动力节点Java学院整理
Jul 14 Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
Aug 28 Javascript
JS call()及apply()方法使用实例汇总
Jul 11 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
JS 网站性能优化笔记
2011/05/24 PHP
PHP模板解析类实例
2015/07/09 PHP
PHP实现导出带样式的Excel
2016/08/28 PHP
php array_merge_recursive 数组合并
2016/10/26 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
jquery 图片截取工具jquery.imagecropper.js
2010/04/09 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
javascript学习(二)javascript常见问题总结
2013/01/02 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
ExtJs整合Echarts的示例代码
2018/02/27 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
layui获取多选框中的值方法
2018/08/15 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
2019/08/17 Javascript
js实现图片无缝循环轮播
2019/10/28 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
python中函数总结之装饰器闭包详解
2016/06/12 Python
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
浅谈django三种缓存模式的使用及注意点
2018/09/30 Python
解读python如何实现决策树算法
2018/10/11 Python
如何在python中写hive脚本
2019/11/08 Python
python实现xml转json文件的示例代码
2020/12/30 Python
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
幼儿园教师请假制度
2014/01/16 职场文书
运动会跳远加油稿
2014/02/20 职场文书
党员评议思想汇报
2014/10/08 职场文书
酒店财务部岗位职责
2015/04/14 职场文书
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python
python如何读取和存储dict()与.json格式文件
2022/06/25 Python