java动态数据展示_[转]以列表形式显示动态加载的数据(JavaScript，Java，JSP，HTML)...

自己可以根据需要，制定动态加载的数据的格式。根据项目需要，曾经写过表格形式。在这里，选用列表形式显示数据。

选用的环境：eclipse

使用的语言：JavaScript，Java，JSP，HTML

采用的方法：使用JavaScript书写端口，调用JSP传递参数，接收数据，将数据在主页面显示，从而完成数据交互。

实现功能的源代码：

1.  主页面的HTML源代码

数据源列表显示

var applicationRoot = "/MIS_Frame_0.1/";

已封装的资源列表

---

2. 用到的CSS源代码

div, li {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: small;

}

ul {

position:relative;

list-style: none;

margin:0; padding:0;

overflow: visible;

}

li {position:relative;}

#leftDiv {

position: absolute;

top: 16%; left: 0;  bottom: 0;

width: 30%;

margin: 0; padding: 7px;

border-right: 2px solid #bb9;

background-color: #eed;

}

#leftDiv li  {

margin: 3px 0; padding: 3px 3em 3px 10px;

border: 2px solid #456;

background-color: #cde;

cursor: move;

}

3. 用到的JavaScript源代码

方法一：原始的方法，没有使用Ajax框架

function getdslists()

{

createXMLHttpRequest();

xmlHttp.open("POST",applicationRoot + "/GetDSLists.jsp",true);

xmlHttp.onreadystatechange=handleStateChange;

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xmlHttp.send(null);

}

var xmlHttp;

function createXMLHttpRequest()

{

if(window.ActiveXObject)

{

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}else if(window.XMLHttRequest)

{

xmlHttp=new XMLHttpRequest();

}

}

function handleStateChange()

{

if(xmlHttp.readyState==4)

{

//alert("ok");

if(xmlHttp.status==200)

{

//alert("ok,good");

//alert(xmlHttp.responseText);

document.getElementById("leftDiv").innerHTML=xmlHttp.responseText;

}else  {alert("wrong wrong");}

}

}

方法二：使用Ajax的prototype框架

function GetData()

{

var myAjax = new Ajax.Request(

applicationRoot + "/GetDSLists.jsp?",

{

method: 'POST',

onComplete: GetData

}

);

}

function GetData(response)

{

document.getElementById("leftDiv").innerHTML=xmlHttp.responseText;

}

4. JSP源代码

String result = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>";

ShowDSNameList dsnamelist = new ShowDSNameList();

String path = "E:/xml";

String aa = dsnamelist.GetListName(path);

result = result + aa;

response.setContentType("text/xml");

out.clear();

out.print(result);

%>

5. 核心的Java代码

package manage;

import java.io.BufferedReader;

import java.io.File;

import java.io.FileReader;

import java.io.FileWriter;

import java.io.IOException;

import org.dom4j.DocumentException;

import org.dom4j.DocumentHelper;

import org.dom4j.Document;

public class ShowDSNameList

{

/**

* @return 读取 path("e:/xml")下所有的文件，返回一个xml格式的字符串

*/

public String GetListName(String path)

{

String listname = "";

StringBuffer ListName = new StringBuffer();

try

{

String filepath = path;

File file1 = new File(filepath);

File file[] = file1.listFiles();

System.out.println(file.length);

int count = 0;

ListName.append("\n\r

• ");

for (int i=0; i

{

if (file[i].isFile())

count++;

ListName.append("\n\r 

ListName.append(count);

ListName.append("\">");

String aa = file[i].getName().toString();

String ff = aa.substring(0,aa.indexOf("."));

ListName.append(ff);

ListName.append("

");

}

ListName.append("\n\r

");

listname = ListName.toString();

}catch (Exception e){e.printStackTrace();}

return listname;

}

}

以上是实现“以列表形式显示动态加载的数据”功能的所有源代码，需要它的朋友，可以根据列出的内容整理一下，然后在tomcat下试运行。