mongodb基础系列——数据库查询数据返回前台JSP（二）
上篇博客论述了，数据库查询数据返回前台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);
//生成td
var 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 { @Override
protected 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形式，默认是rows
initJsonList(request,response,list);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
} }
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(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（一）
经过一段时间停顿,终于提笔来重新整理mongodb基础系列博客了. 同时也很抱歉,由于各种原因,没有及时整理出,今天做了一个demo,来演示,mongodb数据库查询的数据在JSP显示问题. 做了一个 ...
- laravel 查询数据返回的结果
laravel查询数据返回的结果 在插入数据库的时候,发现查询数据返回的结果是一个对象;即使是空数据 返回的不是true或者false 那么要判断该结果是否查询有结果 该如果呢? 学习源头: http ...
- C#连接Oracle数据库查询数据
C#连接Oracle数据库可以实现许多我们需要的功能,下面介绍的是C#连接Oracle数据库查询数据的方法,如果您对C#连接Oracle数据库方面感兴趣的话,不妨一看. using System; u ...
- 用struts2标签如何从数据库获取数据并在查询页面显示。最近做一个小项目，需要用到struts2标签从数据库查询数据，并且用迭代器iterator标签在查询页面显示，可是一开始，怎么也获取不到数据，想了许久，最后发现，是自己少定义了一个变量，也就是var变量。
最近做一个小项目,需要用到struts2标签从数据库查询数据,并且用迭代器iterator标签在查询页面显示,可是一开始,怎么也获取不到数据,想了许久,最后发现,是自己少定义了一个变量,也就是var变 ...
- 在使用Ibatis查询数据返回时，报如下错误：java ibatis The error happened while setting a property on the result object
问题: 在使用Ibatis查询数据返回时,报如下错误: [com.show.add.proxy.SqlMapClientTemplateProxy]com.ibatis.common.jdbc.exc ...
- koa 基础（二十一）nodejs 操作mongodb数据库 --- 查询数据
1.app.js /** * nodejs 操作mongodb数据库 * 1.安装 操作mongodb * cnpm install mongodb --save * 2.引入 mongodb 下面的 ...
- Mongodb基础用法及查询操作[转载]
插入多条测试数据> for(i=1;i<=1000;i++){... db.blog.insert({"title":i,"content":&qu ...
- Mongodb基础用法及查询操作
插入多条测试数据> for(i=1;i<=1000;i++){... db.blog.insert({"title":i,"content":&qu ...
- [转]C#反射，根据反射将数据库查询数据和实体类绑定，并未实体类赋值
本文来自:http://www.cnblogs.com/mrchenzh/archive/2010/05/31/1747937.html /****************************** ...
随机推荐
- Samba 4.x.x全版本存在命令执行漏洞
Samba 4.0.0到4.1.10版本的nmbd(the NetBIOS name services daemon)被发现存在远程命令执行漏洞.CVE编号为CVE-2014-3560.目前官方已经发 ...
- WebApp开发之Cordova安装教程
1 安装Cordova (Cordova开发环境的安装,包括所涉及的Node.js.Cordova CLI.JDK及Android SDK等,然后创建一个HelloWord项目.) 1.1 安装Nod ...
- Asp.net 后台添加Meta标签方法
Asp.net 后台添加Meta标签方法包括keywords,CSS.JS 下面是从Asp.net 后台添加CSS.JS.Meta标签的写法,我们这里写成函数方便以后使用.如果函数放在页面类中, Pa ...
- Android 怎样使用API
本文针对Android开发如何使用API文档进行一些经验分享. 1.为什么需要掌握API的使用. 也许你需要完成一个功能时很多时候你在网上google一番,因为很可能找到有用的代码片段,甚至不用关心具 ...
- Android service binder aidl 关系
/********************************************************************************** * Android servic ...
- 【转】VS2012编译出来的程序，在XP上运行，出现“.exe 不是有效的 win32 应用程序” “not a valid win32 application”
原文网址:http://www.cnblogs.com/Dageking/archive/2013/05/15/3079394.html VS2012编译出来的程序,在XP上运行,出现“.exe 不是 ...
- 常用的PL/SQL开发原则
(1)广泛使用绑定变量,特别是批量绑定,因为这可以有效的避免sql的硬解析和PL/SQL引擎和SQL引擎的上下文切换!(2)广泛使用UROWID来处理DML语句(UROWID是ROWID扩展,ORAC ...
- hdu 3068(最长回文)
题意:容易理解... 思路:可以用扩展kmp来做,但是我还没怎么弄懂,时间复杂度O(n*logn),而manacher算法,第一次听说,代码比较短,不难理解,和扩展kmp有点类似,时间复杂度为:O(n ...
- iOS已发布应用中对异常信息捕获和处理
iOS已发布应用中对异常信息捕获和处理 iOS开发中我们会遇到程序抛出异常退出的情况,如果是在调试的过程中,异常的信息是一目了然,但是如果是在已经发布的程序中,获取异常的信息有时候是比较困难的. iO ...
- MVC和WebForm的优缺点对比
1 WebForm优点 1)支持事件模型开发,得益于丰富的服务端组件,WebForm开发可以迅速的搭建Web应用 2)使用方便,入门容易 3)控件丰富的WebForm 2 WebForm缺点 1)封 ...