AJAX 添加员工(①把获取到的List集合用转为Json②动态获取部门名字)

最新推荐文章于 2022-07-09 21:50:03 发布

原创最新推荐文章于 2022-07-09 21:50:03 发布 · 406 阅读

1 ·

CC 4.0 BY-SA版权

练习专栏收录该内容

18 篇文章

订阅专栏

用AJAX添加员工到数据库中:(部门是动态获取数据库中的内容)

一.目录结构:
在这里插入图片描述

二.结果图:
在这里插入图片描述

[ 注 ] :一个小技能点:

var strData=$("#add").serialize();
serialize()方法是jQuery中封装的,用来获取form表单中的数据,必须是form表单中的!!!

三.核心代码:

1.dao层:

public int addEmp(Emp emp) {
		int result=0;
		String sql = "insert into emp(empno,ename,job,sal,deptno) values(?,?,?,?,?)";
		List<Object> para = new ArrayList<Object>();
		para.add(emp.getEmpno());
		para.add(emp.getEname());
		para.add(emp.getJob());
		para.add(emp.getSal());
		para.add(emp.getDeptno());
		result = db.executeOper(sql,para);
		return result;
	}

2.service层

	//AJAX 添加员工
	public boolean addEmp(Emp emp) {
		int result=ed.addEmp(emp);
		if(result==1) {
			return true;
		}else{
			return false;
		}
	}

3.controller层

package cn.qf.emp.controller;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import cn.qf.emp.pojo.Emp;
import cn.qf.emp.service.EmpService;

/**
 * Servlet implementation class AddEmpServlet
 */
@WebServlet("/AddEmpServlet")
public class AddEmpServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public AddEmpServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.getWriter().append("Served at: ").append(request.getContextPath());
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//1、获取表单数据
		request.setCharacterEncoding("utf-8");
		Emp emp=new Emp();
		emp.setEmpno(request.getParameter("uid"));
		emp.setEname(request.getParameter("uname"));
		emp.setSal(Float.parseFloat(request.getParameter("sal")));
		emp.setJob(request.getParameter("job"));
		emp.setDeptno(request.getParameter("dept"));
		//2、调用业务逻辑
		EmpService es=new EmpService();
		boolean result=es.addEmp(emp);
		//3、响应结果
		PrintWriter pw=response.getWriter();
		pw.print(result);
	}

}

4.视图层(程序运行入口)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax添加员工的页面</title>
<script type="text/javascript" src="../js/jquery-2.1.1.js"></script>
<script type="text/javascript">
function save(){
	//获取数据
	//var uid=$("#uid").val();
	//var uname=$("#uname").val();
	//var job=$("#job").val();
	//var sal=$("#sal").val();
	//var dept=$("#dept").val();
	//构造提交的数据
	//var strData="uid="+uid+"&uname="+uname+"&job="+job+"&sal="+sal+"&dept="+dept;
	
	//jQuery中封装的方法,作用相当于上面注释掉的代码(即获取数据)
	var strData=$("#add").serialize();
	var url="/EmpAjax/AddEmpServlet";
	$.ajax({
		url:url,
		data:strData,//向后台提交数据
		type:"post",
		dataType:"text",
		success:function(rt){
			if(rt=="true"){
				alert("添加成功");
			}else{
				alert("添加失败");
			}
		}
	});
}
</script>
</head>
<body>

<form id="add">
<p>编号:<input type="text" id="uid" name="uid"></p>
<p>姓名:<input type="text" id="uname" name="uname"></p>
<p>职务:<input type="text" id="job" name="job"></p>
<p>工资:<input type="text" id="sal" name="sal"></p>
<p>部门:<select id="dept" name="dept">
	<option>-请选择部门-</option>
	<option value="10">开发一部</option>
	<option value="20">开发二部</option>
	<option value="30">开发三部</option>
	<option value="40">开发四部</option>
</select></p>

<p>
	<input type="button" value="添加员工" onclick="save()"/>
	<input type="button" value="返回" onclick="myBack()"/>
</p>
</form>

</body>
</html>