实验3扩展JavaScript框架应用.docx

实验3扩展JavaScript框架应用.docx

《实验3扩展JavaScript框架应用.docx》由会员分享，可在线阅读，更多相关《实验3扩展JavaScript框架应用.docx（11页珍藏版）》请在冰豆网上搜索。

实验3扩展JavaScript框架应用

实验报告

学院（系）名称：

计算机与通信工程学院

姓名

学号

专业

计算机科学与技术

班级

13计算机

实验名称

实验3：

扩展的JavaScript框架应用

课程名称

Web应用程序设计与开发

课程代码

0661043

实验时间

2016年5月26日中午5-6节

2016年5月30日3-4节

实验地点

7-212

7-220

批改意见

成绩

教师签字：

一、实验目的

（1）掌握利用扩展的JavaScript框架构架Web应用程序；

（2）掌握EasyUI中常用组件的使用方法。

（3）掌握JQuery常用方法$.post（）的使用。

（4）JSON格式串和Java集合工具类的转换工具的使用。

二、实验环境

Windows操作系统，Tomcat，MyEclipse，Dreamweaver，记事本。

三、实验要求

1、构建基于Java的JDBC访问数据库的类。

具体要求：

（1）类的实现上应具有执行查询SQL语句的返回结果集的方法；

（2）能够实现执行insertinto、update及delete方法；

（3）类应进行相关资源的释放。

2、EasyUI组件ComboBox的属性和使用，要求：

（1）构建表，将表中的数据初始化到ComboBox中；

（2）将ComboBox组件的值提交到Servlet中；

（3）提交数据利用JQuery中的$.post（）方法。

3、EasyUI组件数据表格组件：

DataGrid的属性和使用，具体要求：

（1）初始化DataGrid组件：

将表中的数据显示在DataGrid组件中；

（2）获得选中DataGrid组件中某一行中的数据；

（3）DataGrid控件中应带有分页功能；

（4）当对数据库表中的数据进行修改时，能够自动刷新DataGrid中的数据。

四、实验过程记录（源程序、测试用例、测试结果及心得体会等）

jdbc访问数据库：

packagecn.ming.labtwo;

importjava.io.IOException;

importjava.sql.Connection;

importjava.sql.DriverManager;

importjava.sql.ResultSet;

importjava.sql.SQLException;

importjava.sql.PreparedStatement;

importjava.sql.Statement;

importjava.util.Properties;

publicclassJDBCUtil{

publicstaticPropertiespros=null;

static{//加载JDBCUtil调用

pros=newProperties（）;

try{

pros.load（Thread.currentThread（）.getContextClassLoader（）.getResourceAsStream（"db.properties"））;

}catch（IOExceptione）{

//TODOAuto-generatedcatchblock

e.printStackTrace（）;

}

}

publicstaticConnectiongetMysqlConn（）{

try{

//Class.forName（"com.mysql.jdbc.Driver"）;

//returnDriverManager.getConnection（"jdbc:

mysql:

//localhost:

3306/testjdbc","oral2","oral"）;

Class.forName（pros.getProperty（"mysqlDriver"））;

returnDriverManager.getConnection（pros.getProperty（"mysqlURL"）,

pros.getProperty（"mysqlUser"）,pros.getProperty（"mysqlPwd"））;

}catch（Exceptione）{

//TODOAuto-generatedcatchblock

e.printStackTrace（）;

returnnull;

}

}

publicstaticvoidclose（ResultSetrs,PreparedStatementps,Connectionconn）{

//关闭顺序resultset-》statment-》connection

try{

if（rs!

=null）{

rs.close（）;

}

if（ps!

=null）{

ps.close（）;

}

if（conn!

=null）{

conn.close（）;

}

}catch（SQLExceptione）{

//TODOAuto-generatedcatchblock

e.printStackTrace（）;

}

}

publicstaticvoidclose（PreparedStatementps,Connectionconn）{

//关闭顺序resultset-》statment-》connection

try{

if（ps!

=null）{

ps.close（）;

}

if（conn!

=null）{

conn.close（）;

}

}catch（SQLExceptione）{

//TODOAuto-generatedcatchblock

e.printStackTrace（）;

}

}

publicstaticvoidclose（Connectionconn）{

//关闭顺序resultset-》statment-》connection

try{

if（conn!

=null）{

conn.close（）;

}

}catch（SQLExceptione）{

//TODOAuto-generatedcatchblock

e.printStackTrace（）;

}

}

}

Combox.页面

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"

pageEncoding="UTF-8"%>

<%@taglibprefix="c"uri="%>

DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http:

//www.w3.org/TR/html4/loose.dtd">

--

-->

functionajax_post（）{

alert（"data"）;

$.post（"Lab2action"

{

$（'#state'）.val（）

}

function（data）{

$（'#msg'）.html（data）;

}

）;

}

--

用的是实验二里面的action，查出来，直接放在combox里面了，。

combox，没有单独action。

-->

BasicComboBox

20px0">