使用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 相关文章推荐
类似框架的js代码
Nov 09 Javascript
jQuery之折叠面板的深入解析
Jun 19 Javascript
Iframe 自动适应页面的高度示例代码
Feb 26 Javascript
jquery判断元素是否隐藏的多种方法
May 06 Javascript
JavaScript 动态加载脚本和样式的方法
Apr 13 Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 Javascript
Bootstrap编写导航栏和登陆框
May 30 Javascript
ES6 Promise对象概念与用法分析
Apr 01 Javascript
如何使用bootstrap框架 bootstrap入门必看!
Apr 13 Javascript
js如何获取网页所有图片
May 12 Javascript
weex slider实现滑动底部导航功能
Aug 28 Javascript
深入理解Puppeteer的入门教程和实践
Mar 05 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实现百度网盘图片直链的代码分享
2012/11/01 PHP
PHP实现格式化文件数据大小显示的方法
2015/01/03 PHP
php实现有趣的人品测试程序实例
2015/06/08 PHP
PHP设置头信息及取得返回头信息的方法
2016/01/25 PHP
JavaScript 获取用户客户端操作系统版本
2009/08/25 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
2010/05/17 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
防止文件缓存的js代码
2013/01/10 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
2013/10/24 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
VUE element-ui 写个复用Table组件的示例代码
2017/11/18 Javascript
浅谈基于Vue.js的移动组件库cube-ui
2017/12/20 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
2018/08/25 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
2019/08/27 jQuery
Javascript原生ajax请求代码实例
2020/02/20 Javascript
vant自定义二级菜单操作
2020/11/02 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
[01:46]新英雄登场
2019/09/10 DOTA
python为tornado添加recaptcha验证码功能
2014/02/26 Python
Python实现读取目录所有文件的文件名并保存到txt文件代码
2014/11/22 Python
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
django rest framework 数据的查找、过滤、排序的示例
2018/06/25 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
python循环输出三角形图案的例子
2019/11/22 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
python文件路径操作方法总结
2020/12/21 Python
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
应届中专生自荐书范文
2014/02/13 职场文书
党的群众路线剖析材料
2014/10/09 职场文书