实验3-扩展JavaScript框架应用

第1页共18页实验报告学院（系）名称：计算机与通信工程学院姓名刘胜杰学号专业计算机科学与技术班级13计算机实验名称实验3：扩展的JavaScript框架应用课程名称Web应用程序设计与开发课程代码0661043实验时间2016年5月26日中午5-6节2016年5月30日3-4节实验地点7-2127-220批改意见成绩教师签字：一、实验目的（1）掌握利用扩展的JavaScript框架构架Web应用程序；（2）掌握EasyUI中常用组件的使用方法。（3）掌握JQuery常用方法$.post()的使用。（4）JSON格式串和Java集合工具类的转换工具的使用。二、实验环境Windows操作系统，Tomcat，MyEclipse，Dreamweaver，记事本。三、实验要求1、构建基于Java的JDBC访问数据库的类。具体要求：第2页共18页（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;第3页共18页importjava.sql.ResultSet;importjava.sql.SQLException;importjava.sql.PreparedStatement;importjava.sql.Statement;importjava.util.Properties;publicclassJDBCUtil{publicstaticPropertiespros=null;static{//加载JDBCUtil调用pros=newProperties();try{第4页共18页pros.load(Thread.currentThread().getContextClassLoader().getResourceAsStream(db.properties));}catch(IOExceptione){//TODOAuto-generatedcatchblocke.printStackTrace();}}publicstaticConnectiongetMysqlConn(){try{//Class.forName(com.mysql.jdbc.Driver);//returnDriverManager.getConnection(jdbc:mysql://localhost:3306/testjdbc,oral2,oral);Class.forName(pros.getProperty(mysqlDriver));第5页共18页returnDriverManager.getConnection(pros.getProperty(mysqlURL),pros.getProperty(mysqlUser),pros.getProperty(mysqlPwd));}catch(Exceptione){//TODOAuto-generatedcatchblocke.printStackTrace();returnnull;}}publicstaticvoidclose(ResultSetrs,PreparedStatementps,Connectionconn){//关闭顺序resultset-》statment-》connectiontry{if(rs!=null){rs.close();第6页共18页}if(ps!=null){ps.close();}if(conn!=null){conn.close();}}catch(SQLExceptione){//TODOAuto-generatedcatchblocke.printStackTrace();}}publicstaticvoidclose(PreparedStatementps,Connectionconn){第7页共18页//关闭顺序resultset-》statment-》connectiontry{if(ps!=null){ps.close();}if(conn!=null){conn.close();}}catch(SQLExceptione){//TODOAuto-generatedcatchblocke.printStackTrace();}第8页共18页}publicstaticvoidclose(Connectionconn){//关闭顺序resultset-》statment-》connectiontry{if(conn!=null){conn.close();}}catch(SQLExceptione){//TODOAuto-generatedcatchblocke.printStackTrace();}}第9页共18页}Combox.页面%@pagelanguage=javacontentType=text/html;charset=UTF-8pageEncoding=UTF-8%%@taglibprefix=curi=!DOCTYPEhtmlPUBLIC-//W3C//DTDHTML4.01Transitional//EN=UTF-8titleBasicComboBox-jQueryEasyUIDemo/titlelinkrel=stylesheettype=text/csshref=../themes/default/easyui.csslinkrel=stylesheettype=text/csshref=../themes/icon.csslinkrel=stylesheettype=text/csshref=../demo/demo.cssscripttype=text/javascriptsrc=../jstwo/jquery.easyui.min.js/scriptscripttype=text/javascriptsrc=../jquery.min.js/scriptscripttype=text/javascriptsrc=../js/jquery-3.0.0.js/script!--scripttype=text/javascriptsrc=../js/2.js/script第10页共18页scriptsrc=../js/dopost.js/script--scripttype=text/javascriptfunctionajax_post(){alert(data);$.post(Lab2action,{$('#state').val()},function(data){$('#msg').html(data);});}/script/head第11页共18页body!--用的是实验二里面的action，查出来，直接放在combox里面了，。combox，没有单独action。--h2BasicComboBox/h2p/pdivstyle=margin:20px0/divselectclass=easyui-comboboxid=statename=statestyle=width:200px;c:forEachitems=${loginmap}var=loginoptionvalue=${login.value.name}${login.value.name}/option/c:forEach/selectpid=msg/pbrbr第12页共18页inputtype=buttonname=submitvalue=submitonClick=ajax_post()/body/htmlDataGrid页面%@pagelanguage=javacontentType=text/html;charset=UTF-8pageEncoding=UTF-8%%@taglibprefix=curi=!DOCTYPEhtmlPUBLIC-//W3C//DTDHTML4.01Transitional//EN=Content-Typecontent=text/html;charset=UTF-8titleBasicDataGrid-jQueryEasyUIDemo/titlelinkrel=stylesheettype=text/csshref=../themes/default/easyui.csslinkrel=stylesheettype=text/csshref=../themes/icon.csslinkrel=stylesheettype=text/csshref=../demo/demo.cssscripttype=text/javascriptsrc=../jstwo/jquery.min.js/scriptscripttype=text/javascriptsrc=../jstwo/jquery.easyui.min.js/script/headbody第13页共18页h2BasicDataGrid/h2pTheDataGridiscreatedfrommarkup,noJavaScriptcodeneeded./pdivstyle=margin:20px0;/divtableclass=easyui-datagridtitle=BasicDataGridstyle=width:700px;height:250pxdata-options=singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get'theadtrthdata-options=field:'itemid',width:80ItemID/ththdata-options=field:'productid',width:100Product/ththdata-options=field:'listprice',width:80,align:'right'ListPrice/ththdata-options=field:'unitcost',width:80,align:'right'UnitCost/th/trc:forEachitems=${requestScope.log