传智播客java学习--ajax小项目笔记

最新推荐文章于 2024-09-25 11:06:23 发布

huangyu18

最新推荐文章于 2024-09-25 11:06:23 发布

阅读量265

点赞数

文章标签： java c3p0 数据库连接池 struts ajax jquery插件

本文链接：https://blog.csdn.net/huangyu18/article/details/5248900

版权

今天佟老师教我们使用ajax技术来完成数据库级联查询的一个小项目，课下我对这个项目做了以下笔记：

Ajax小项目：使用的技术：c3p0连接池、struts，jquery及其插件、dbutil

a) 步骤：配置c3p0的数据库连接池,导入jar包，导入oracle驱动，

b) 添加c3p0的配置文件，c3p0-config.xml；

<?xml version="1.0" encoding="UTF-8"?>

<c3p0-config>

<named-config name="ajaxDataSource">

<property name="user">system</property>

<property name="jdbcUrl">jdbc:oracle:thin:@localhost:1521:itcast</property>

<property name="driverClass">oracle.jdbc.driver.OracleDriver</property>

</named-config>

c) </c3p0-config>

d) 写一个测试类：junit测试配置文件，

e) ……………………….

f) 导入struts的jar包：

g) 导入struts的config文件到web-inf，

二、此项目的重点：

a) 第一次页面显示时，已经将城市列表显示出来了，所以第一次打开页面时，已经自动到后台数据库查找城市了，

b) 当点击城市下拉列表选择城市时，使用$("#city").change事件，将选择的城市发送给后台，后台根据城市查找部门，

c) 由于使用ajax技术，可以不刷新页面而更新数据，所以这里我们在后台使用JSON数据格式将数据传送到前台，所以，当后台（Action）要将查找到的部门转化为JSON数组的格式传送给前台，

d) 如果返回的是List集合，可以用这种方法转换：

private String convertObject2Josn(List<?> objs){

StringBuffer result=new StringBuffer("[");

for(Object obj:objs){

JSONObject jsonObject=new JSONObject(obj);

result.append(jsonObject.toString()).append(",");

}

if(objs!=null&&objs.size()>0){

result.replace(result.length()-1, result.length(), "");

}

result.append("]");

return result.toString();

e) }

f) 如果返回的是对象类型，可以这样转换：

private String convertObject2Josn(Employee employee) {

JSONObject jsonObject = new JSONObject(employee);

return jsonObject.toString();

g) }

h) 转换好之后，还需要设置发送的格式，再发送给前台，JSON数据类型这样设置格式：

response.setContentType("text/javascript");

i) response.getWriter().print(result);

j) 这样，后台就搞定了，在前台jsp页面，接收JSON数据后，再将数据添加到部门下拉框里面，代码如下：

$("#city").change(function(){

if(this.value!=""){

var url="${pageContext.request.contextPath}/employeeaction.do?method=listDepts";

var args={time: new Date(),cityId:this.value};

$.getJSON(url,args,function(data){

if(data.length>0){

for(var i=0;i<data.length;i++){

var dept=data[i];

var deptName=dept.departmentName;

var deptId=dept.departmentId;

k) $("<option value='"+deptId+"'>"+deptName+"</option>").appendTo($("#dept"));

l) 当点击员工下拉框后，要将员工的信息显示到页面隐藏的表格中，只有选择员工后，表格才会显示，再将员工的信息添加到表格：代码如下：

$("#employee").change(function(){

if(this.value != ""){

var url = "${pageContext.request.contextPath }/employeeaction.do?method=employeeDetail";

var args = {time: new Date(), empId: this.value};

$.getJSON(url, args, function(data){

if(data != null){

$("#empDetail").show();

var emp = data;

var empName = emp.employeeName;

var email = emp.email;

var salary = emp.salary;

$("#name").text(empName);

$("#email").text(email);

m) $("#salary").text(salary);

n) 表格在点击城市和部门时都是隐藏的：

<table border="1" cellpadding="5"

cellspacing="0" style="display:none"

o) id="empDetail">

p) 此项目还运用了这样的技术：当点击城市、部门、员工，在查询数据的过程中（即ajax开始），页面变得半透明，中间有动态的图片显示，查询完之后（即ajax结束），页面又恢复。这是jquery的jquery.blockUI.js插件的功劳，我们可以这样使用它：导入jquery.blockUI.js插件：将此特效代码放到单独的一个jsp文件中：在前台页面导入此jsp代码：

src="${pageContext.request.contextPath}/scripts/jquery-1.3.1.js">

</script>

q) <%@ include file="/commons/ajax.jsp" %>

总结：这个项目是使用ajax技术，实现了不用刷新页面就可以更新页面的数据，利用jquery更加简化了JavaScript的操作，使用jquery插件完成了页面特效，使用JSON格式传输数据。这里需要注意：服务器查询到的数据需要转换为JSON格式的数组，发送的页面时，还要设置发送的格式，这样页面才能取到数据。

自己写完这个项目后，感觉有点小的成就感，我要在以后的学习中更加努力的学习。