实验3扩展JavaScript框架应用_第1页
实验3扩展JavaScript框架应用_第2页
实验3扩展JavaScript框架应用_第3页
实验3扩展JavaScript框架应用_第4页
实验3扩展JavaScript框架应用_第5页
已阅读5页，还剩13页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、实验报告学院（系）名称：计算机与通信工程学院姓名刘胜杰学号专业计算机科学与技术班级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

2、，MyEclipse，Dreamweaver，记事本。三、 实验要求1、构建基于Java的JDBC访问数据库的类。具体要求：（1）类的实现上应具有执行查询SQL语句的返回结果集的方法；（2）能够实现执行insert into、update及delete方法；（3）类应进行相关资源的释放。2、EasyUI组件ComboBox的属性和使用，要求：（1）构建表，将表中的数据初始化到ComboBox中；（2）将ComboBox组件的值提交到Servlet中；（3）提交数据利用JQuery中的$. post ()方法。3、EasyUI组件数据表格组件：DataGrid的属性和使用，具体要求：（1）初始化

3、DataGrid组件：将表中的数据显示在DataGrid组件中；（2）获得选中DataGrid组件中某一行中的数据；（3）DataGrid控件中应带有分页功能；（4）当对数据库表中的数据进行修改时，能够自动刷新DataGrid中的数据。四、实验过程记录（源程序、测试用例、测试结果及心得体会等）jdbc访问数据库： package cn.ming.labtwo;import java.io.IOException;import java.sql.Connection;import java.sql.DriverManager;import java.sql.ResultSet;import ja

4、va.sql.SQLException;import java.sql.PreparedStatement;import java.sql.Statement;import java.util.Properties;public class JDBCUtil public static Properties pros=null;static/加载JDBCUtil调用pros=new Properties();try pros.load(Thread.currentThread().getContextClassLoader().getResourceAsStream("p

5、erties"); catch (IOException e) / TODO Auto-generated catch blocke.printStackTrace();public static Connection getMysqlConn()try /Class.forName("com.mysql.jdbc.Driver");/return DriverManager.getConnection("jdbc:mysql:/localhost:3306/testjdbc","oral2","oral"

6、;);Class.forName(pros.getProperty("mysqlDriver");return DriverManager.getConnection(pros.getProperty("mysqlURL"),pros.getProperty("mysqlUser"),pros.getProperty("mysqlPwd"); catch (Exception e) / TODO Auto-generated catch blocke.printStackTrace();return null; p

7、ublic static void close(ResultSet rs,PreparedStatement ps,Connection conn)/关闭顺序resultset-statment-connectiontry if(rs!=null)rs.close();if(ps!=null)ps.close();if (conn!=null) conn.close(); catch (SQLException e) / TODO Auto-generated catch blocke.printStackTrace();public static void close(PreparedSta

8、tement ps,Connection conn)/关闭顺序resultset-statment-connectiontry if(ps!=null)ps.close();if (conn!=null) conn.close(); catch (SQLException e) / TODO Auto-generated catch blocke.printStackTrace();public static void close(Connection conn)/关闭顺序resultset-statment-connectiontry if (conn!=null) conn.close()

9、; catch (SQLException e) / TODO Auto-generated catch blocke.printStackTrace();Combox.页面<% page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><% taglib prefix="c" uri=" %><!DOCTYPE html PUBLIC "-/W3C/DTD H

10、TML 4.01 Transitional/EN" "/TR/html4/loose.dtd"><html><head><meta charset="UTF-8"><title>Basic ComboBox - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="./themes/default/easy

11、ui.css"><link rel="stylesheet" type="text/css" href="./themes/icon.css"><link rel="stylesheet" type="text/css" href="./demo/demo.css"><script type="text/javascript" src="./jstwo/jquery.easyui.min.js&quo

12、t;></script><script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript" src="./js/jquery-3.0.0.js"></script><!- <script type="text/javascript" src="./js/2.js"></

13、script><script src="./js/dopost.js"></script> -><script type="text/javascript">function ajax_post()alert("data"); $.post("Lab2action" , $('#state').val() ,function(data) $('#msg').html(data); );</script></head&g

14、t;<body><!- 用的是实验二里面的action，查出来，直接放在combox里面了，。combox，没有单独action。 -><h2>Basic ComboBox</h2><p></p><div style="margin:20px 0"></div><select class="easyui-combobox" id="state" name="state" style="width:200p

15、x;"><c:forEach items="$loginmap " var="login"><option value="$ ">$ </option></c:forEach></select><p id="msg"></p><br><br><input type="button" name="

16、submit" value="submit" onClick="ajax_post()"> </body></html>DataGrid页面<% page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><% taglib prefix="c" uri=" %><!DOCTYPE html P

17、UBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Basic DataGrid - jQuery EasyUI Demo</title><link rel=&qu

18、ot;stylesheet" type="text/css" href="./themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="./themes/icon.css"><link rel="stylesheet" type="text/css" href="./demo/demo.css"><scri

19、pt type="text/javascript" src="./jstwo/jquery.min.js"></script><script type="text/javascript" src="./jstwo/jquery.easyui.min.js"></script></head><body><h2>Basic DataGrid</h2><p>The DataGrid is created from mar

20、kup, no JavaScript code needed.</p><div style="margin:20px 0;"></div><table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get'"><thead><tr><th data-options="field:'itemid',width:80">Ite

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论