java后端二级联动

转载

编程艺术大师 2024-09-13 19:53:46

文章标签 java后端二级联动 java 数据下拉框 ajax 文章分类 Java 后端开发

-------最后一个模块,患者挂号模块----------------

新的功能:下拉框的联动,从数据库中读取数据来显示.

我之前写了一篇博客来说明联动的原理,那个时候我们定义的数据是静态的数据,在前端直接使用数组来实现,但这个是不可能实际使用的,只能学习原理.这里我们来学习怎么通过后台数据来实现.
患者挂号的展示效果图:

1.建表:

CREATE TABLE `patient` (
  `pid` VARCHAR(10) NOT NULL,
  `pname` VARCHAR(30) DEFAULT NULL,
  `cardno` VARCHAR(20) DEFAULT NULL,
  `siNumber` VARCHAR(18) DEFAULT NULL,
  `registerMoney` DOUBLE DEFAULT NULL,
  `phone` VARCHAR(30) DEFAULT NULL,
  `isPay` INT(11) DEFAULT NULL,
  `sex` INT(11) DEFAULT NULL,
  `age` INT(11) DEFAULT NULL,
  `consultation` INT(11) DEFAULT NULL,
  `department` INT(11) DEFAULT NULL,
  `did` INT(11) DEFAULT NULL,
  `registerDate` DATETIME DEFAULT NULL,
  `mark` VARCHAR(500) DEFAULT NULL,
  PRIMARY KEY (`pid`)
) ENGINE=INNODB DEFAULT CHARSET=utf8;

2.这里我们需要知道的是患者挂号表中绝大数数据都是可以直接通过注册来写入的,都是不需要更多逻辑处理的数据,但这个表有两个字段的内容有些不同,一个是department 科室,表示当前患者挂号的科室是什么,还有就是did,这个是医生的编号,最终展示的数据应该是医生的姓名,而不是编号.
3.开始写代码

首先查询的sql语句就要写好,这里使用内连接查询就行了,因为不存在患者挂号的科室和医生在医生表中没有,所以这次的动态拼接sql要发生变化,这里直接写Dao里面的代码来帮助理解:

//返回患者结果集
	public List<Patient> findAllMedicine(PageTool pageTool, Patient patient) {
		StringBuilder sb=new StringBuilder("SELECT pid,  pname,  p.cardno,  siNumber,registerMoney,  p.phone,isPay,  p.gender,  p.age,  consultation,  p.department,  p.did, registerDate, p.mark, dname FROM patient p INNER JOIN doctor d ON p.`did`=d.`did` where 1=1 ");
		
		//1.当药品名不为null,并且去掉空格也不为null
		if (patient.getPid()!=null&& !patient.getPid().trim().equals("")) {
			sb.append(" and p.pid like '%"+patient.getPid()+"%' ");
		}
		//当选择了姓名
		if (patient.getPname()!=null&& !patient.getPname().trim().equals("")) {
			sb.append(" and p.pname like '%"+patient.getPname()+"%' ");
		}
		//3.当选择的科室不为0
		if (patient.getDepartment()!=0) {
			sb.append(" and p.department ="+patient.getDepartment());
		}
		sb.append(" limit ?,? ");
		List<Patient> patients=null;
		try {
			patients=qRunner.query(sb.toString(),new BeanListHandler<Patient>(Patient.class),pageTool.getStartIndex(),pageTool.getPageSize());
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return patients;
	}

上面的代码是实现查询结果,一样的,是分页查询和模糊查询的代码结果,只是具体sql发生了变化.
接下来我们学习一下怎么使用ajax来实现联动效果,导入jq包等配置就不细说了

<script type="text/javascript">
    	$("#department").change(function(){//获取科室下拉框的值改变事件
    		var department=$(this).val();//获取下拉框选择到的值,也就是科室的序号
    		$.ajax({//使用ajax异步请求实现医生下拉框的局部刷新
    			url:"${path}patient",
    			data:{"department":department,"func":"selectDoctorByDet"},//携带数据和请求的方法
    			type:"get",
    			dataType:"json",//以json格式返回
    			success:function(doctors){
    				$("#doctor option").remove(":gt(0)");//先清空第一个以外的所有下拉框
    				for(var i in doctors){
    				//创建一个标签进行追加到医生下拉框的下面
    					var option=$("<option value='"+doctors[i].did+"'>"+doctors[i].dname+"</option>");
    					$("#doctor").append(option);
    				}
    			}
    		})
    	})
    })
    
    </script>
    //下面是页面中的下拉选择框标签
<select name="department" id="department">
        		<option>--请选择科室---</option>
        		<option value="1">急诊科</option>
        		<option value="2">儿科</option>
        		<option value="3">妇科</option>
        		<option value="4">皮肤科</option>
        		<option value="5">内分泌科</option>
        		<option value="6">牙科</option>
</select>
<select name="did" id="doctor">
	<option>--请选择医生---</option>
</select>

后台代码部分:

/**
	 * 科室联动医生查询
	 * @throws IOException 
	 */
	public void selectDoctorByDet(HttpServletRequest request,HttpServletResponse response) throws IOException {
		String department=request.getParameter("department");//获取到科室序号
		List<Doctor> doctors=doctorService.selectDoctorByDet(department);//返回结果集
		ObjectMapper objectMapper=new ObjectMapper();//json格式转换
		String writeValueAsString = objectMapper.writeValueAsString(doctors);
		response.setContentType("text/html;charset=utf-8");
		response.getWriter().write(writeValueAsString);//将数据返回给ajax请求处理
	}