使用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的目的分析
Jan 05 Javascript
jQuery Ajax 实例全解析
Apr 20 Javascript
通过jQuery源码学习javascript(一)
Dec 27 Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 Javascript
使用原生的javascript来实现轮播图
Feb 24 Javascript
微信小程序图片横向左右滑动案例
May 19 Javascript
详解vee-validate的使用个人小结
Jun 07 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
深入理解es6块级作用域的使用
Mar 28 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
Nov 14 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
一些PHP写的小东西
2006/12/06 PHP
解决控件遮挡问题:关于有窗口元素和无窗口元素
2007/01/28 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
2016/05/30 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
python安装Scrapy图文教程
2017/08/14 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
python实现n个数中选出m个数的方法
2018/11/13 Python
详解【python】str与json类型转换
2019/04/29 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
python实现打砖块游戏
2020/02/25 Python
pycharm 实现本地写代码,服务器运行的操作
2020/06/08 Python
基于python图书馆管理系统设计实例详解
2020/08/05 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
AmazeUI的JS表单验证框架实战示例分享
2020/08/21 HTML / CSS
超市优秀员工获奖感言
2014/08/15 职场文书
建设幸福中国演讲稿
2014/09/11 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
掌握一个领域知识,高效学习必备方法
2019/08/08 职场文书
导游词之嵊泗列岛
2019/10/30 职场文书
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技