mongodb基础系列——数据库查询数据返回前台JSP(二)
来源:互联网 发布:js ajax 跨域访问 编辑:程序博客网 时间:2024/06/16 18:31
上篇博客论述了,数据库查询数据返回前台JSP。博客中主要使用Ajax调用来显示JSON串,来获取其中某一个字段,赋给界面中的某一个控件。
那这篇博客中,我们讲解,把后台List传递JSP展示。
List传递界面,以前我们普通的做法是怎么样的呢?foreach 的el表达式?还是java代码?
那对于本身就是Json格式的list,到底如何显示呢?
显然表单中的el表单以及java代码不合适。那我们继续使用Ajax来显示。
一:对于不使用前台框架的情况:就是咱们普通的table,到底如何以表格的形式显示list呢?
OK,方案如下:动态生成表格。
js代码如下:demo中使用某个按钮触发,当然可以在body初始化$(function(){//动态生成表格});各自所需哈。
我把table嵌套在div中:
<body><input type="button" value="用ajax测试具体数据" onclick="testajax()" /><div id="testtable"></div> </body>testajax() js如下:
function testajax() {var _url = "http://localhost:8080/testmongodb/mongodb/";jQuery.ajax({url : _url,type : "get",dataType : "json",success : function(d) { alert(JSON.stringify(d)); //动态生成table var mongotable=$("<table border=\"1\"></table>"); mongotable.appendTo("#testtable"); for(var o in d){//生成tr,添加到table中var tr=$("<tr></tr>"); tr.appendTo(mongotable);//生成tdvar td_id=$("<td width=\"150\">"+d[o].id+"</td>");var td_name=$("<td width=\"150\">"+d[o].name+"</td>");var td_city=$("<td width=\"150\">"+d[o].address.city+"</td>");var td_code=$("<td width=\"150\">"+d[o].address.code+"</td>");//把td添加到tr中td_id.appendTo(tr);td_name.appendTo(tr);td_city.appendTo(tr);td_code.appendTo(tr);}alert($("#testtable").html());}});}至于样式,大家可以根据自己需求在js添加哈。
后台的list如下:
[{ "_id" : { "$oid" : "52564aa6b16b9c6f728c0cf8"} , "id" : 1 , "name" : "小明" , "address" : { "city" : "beijing" , "code" : "065000"}}, { "_id" : { "$oid" : "52566683b16be14866e9bdc5"} , "id" : 2 , "name" : "小红" , "address" : { "city" : "beijing" , "code" : "065000"}}]页面如下:
二:使用前台框架:举例,ligerui中的grid展示:(前提:把js、css已经引入)
grid代码如下:
$(function() { $("#test").ligerGrid({ columns:[ {display:'id',name:'id',width:'200'},{display:'名称',name:'name',width:'200'},{display:'城市',name:'address.city',width:'250'},{display:'邮编',name:'address.code',width:'250'}], rownumbers : true, width:'80%', height:'150', url:'http://localhost:8080/testmongodb/mongodb/' });});
其中的test是div的id:
<body><input type="button" value="用ajax测试具体数据" onclick="testajax()" /><!-- 测试grid,多行数据 --><div id="test"></div> </body>但是你会发现,即使后台显示数据,但是grid竟然无法显示。为啥呢?
那肯定是grid显示数据源格式与给出的json的list格式不匹配。
这是ligerui中grid的特有的,看相应的api会发现,grid的数据源data默认的数据格式,是{Rows:[]}
但是咱们后台的List格式如下:
[{ "_id" : { "$oid" : "52564aa6b16b9c6f728c0cf8"} , "id" : 1 , "name" : "小明" , "address" : { "city" : "beijing" , "code" : "065000"}}, { "_id" : { "$oid" : "52566683b16be14866e9bdc5"} , "id" : 2 , "name" : "小红" , "address" : { "city" : "beijing" , "code" : "065000"}}]那只要在前面加上Rows:即可,在js模拟此data
var data={Rows:[{"_id":{"inc":1921780984,"machine":-1318347665,"new":false,"time":1381386918000,"timeSecond":1381386918},"id":1,"name":"小明","address":{"city":"beijing","code":"065000"}},{"_id":{"inc":1726594501,"machine":-1318330040,"new":false,"time":1381394051000,"timeSecond":1381394051},"id":2,"name":"小红","address":{"city":"beijing","code":"065000"}}]}$(function() { $("#test").ligerGrid({ columns:[ {display:'id',name:'id',width:'200'},{display:'名称',name:'name',width:'200'},{display:'城市',name:'address.city',width:'250'},{display:'邮编',name:'address.code',width:'250'}], rownumbers : true, width:'80%', height:'150', data:data// url:'http://localhost:8080/testmongodb/mongodb/' });});结果如下:
当然可以获取data,然后在此基础上拼串{Rows:[]}
当然也可以在返回前台Response中,拼接Rows
package com.mongo.servlet;import java.io.IOException;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import net.sf.json.JSONArray;import net.sf.json.JSONObject;import com.mongo.dao.EntityTest;public class EntityServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {System.out.println("doget.....");try {List list=new EntityTest().selectAll(); response.setCharacterEncoding("UTF-8"); //主要用于ligerui的grid形式,默认是rowsinitJsonList(request,response,list);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {// TODO Auto-generated method stubdoGet(req, resp);}protected void initJsonList(HttpServletRequest request,HttpServletResponse response, List list) {Map map = new HashMap();map.put("Rows", list);JSONObject jsonObject = JSONObject.fromObject(map);try {response.setCharacterEncoding("utf-8");response.getWriter().write(jsonObject.toString());System.out.println(jsonObject);} catch (IOException e) {System.out.println(e.toString());}}}
使用JSONObject对象进行转化。
对于其他非ligerui的展示,其实不必使用JSONObject或JSONArray进行转换,因为本身就是JSON格式。
当然转换也是没有坏处的,只不过转化后格式所有不同而已,但是不影响,因为用户的属性是不会改变的,影响的是mogodb中特有的_id的属性。
{"Rows":[{"_id":{"inc":1921780984,"machine":-1318347665,"new":false,"time":1381386918000,"timeSecond":1381386918},"id":1,"name":"小明","address":{"city":"beijing","code":"065000"}},{"_id":{"inc":1726594501,"machine":-1318330040,"new":false,"time":1381394051000,"timeSecond":1381394051},"id":2,"name":"小红","address":{"city":"beijing","code":"065000"}}]}OK,到此为止,某一个字段以及表格形式的基本功能实现方式已经叙述。
这两篇博客的项目,是用一个项目,只不过各种方式演示,通过注释来完成。
在此提示:若非ligerui,直接使用数组形式而已[],不要使用Rows:[]格式。但是对于其他的框架,比如ext,easyui,他们都有自己的数据源格式,但是肯定的是,后台依然是JSON串。
项目Demo,点我下载
- mongodb基础系列——数据库查询数据返回前台JSP(二)
- mongodb基础系列——数据库查询数据返回前台JSP(一)
- 模糊查询,从数据库获取值,返回前台JSP的方法。
- JSP基础(二十四)——JSTL数据库标签
- jsp数据库基础之---从MySQL数据库中查询数据
- mongodb基础系列——mongodb简介
- MongoDb数据库学习基础语法(二)
- mongoDB基础篇——NoSQL特性及MongoDB数据查询
- MongoDB学习系列(二)mongo聚合查询实例
- springmvc 返回json数据给前台jsp页面展示
- 关于jsp返回json数据给前台javascript
- 利用AJAX后台查询数据库返回json,前台生成表格
- sqlalchemy基础—实例学之二 查询数据库
- Json返回查询的数据,前台ajax获取
- Java基础——JSP(二)
- HQL数据查询基础(二)
- MongoDB入门6——查询(二)
- 数据库实验二( 数据查询 )
- mysql怎么查看端口号
- 如何给dql server 2008已有数据的数据库增加ID列
- Core animation 编程指南
- 【两性】你不知道的冷门性知识
- 找学习者
- mongodb基础系列——数据库查询数据返回前台JSP(二)
- ffmpeg 源代码简单分析 : avcodec_decode_video2()
- WF4.0 基础篇 (十三) InvokeMethod 调用方法
- adb not responding you can wait more
- 操作系统常见面试题(答案仅供参考)
- hdu 3236 Gift Hunting(背包问题)
- Unity3D类分析——全局的类分析
- CMD乱码_更换CMD编码
- HDU - 1421 搬寝室(经典DP)