实验3扩展JavaScript框架应用.docx
- 文档编号:30029829
- 上传时间:2023-08-04
- 格式:DOCX
- 页数:11
- 大小:124.05KB
实验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">
200px;"> forEachitems="${loginmap}"var="login"> forEach>
DataGrid页面
<%@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">
BasicDataGrid
TheDataGridiscreatedfrommarkup,noJavaScriptcodeneeded.
20px0;">
700px;height: 250px" data-options="singleSelect: true,collapsible: true,url: 'datagrid_data1.json',method: 'get'"> 'itemid',width: 80">ItemID 'productid',width: 100">Product 'listprice',width: 80,align: 'right'">ListPrice 'unitcost',width: 80,align: 'right'">UnitCost forEachitems="${requestScope.loginmap}"var="login"> forEach> 结果截图: ${login.value.id} ${login.value.name} ${login.value.pwd} ${login.value.position}
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 实验 扩展 JavaScript 框架 应用
![提示](https://static.bdocx.com/images/bang_tan.gif)