Bootstrap创建新增员工的模态框并使用ajax显示部门信息完成添加

逻辑:

在index.jsp的新增按钮,点击后弹出新增对话框,并前往数据库查询部门列表,显示在对话框中。
在这里插入图片描述
实现效果如图所示:
在这里插入图片描述
以上就是添加页面的模态框,那么接下来便是查询出部门信息

通过发送ajax请求来获取数据,获取部门信息 点击按钮,在查询部门前要清除并启动模态框

//点击新增按钮
	$("#add").click(function(){
		//在弹出模态框之前需要发送ajax请求,查出部门信息并显示
		$("#addmodal select").empty();
		getDepts();
		
		$('#addmodal').modal({
			backdrop:"static"
		})
	});
	//查出所有部门
	function getDepts(){
		$.ajax({
			url:"${APP_PATH}/depts",
			type:"GET",
			success:function(result){
				$("#addmodal select").append("")
				$.each(result.extend.depts,function(){
					var optionEle=$("<option></option>").append(this.deptName).attr("value",this.deptId);
					optionEle.appendTo("#addmodal select");
				})
			}
		})
	}

DeptController.java 返回类型为Msg,将数据加入后返回

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.ssm.beans.Department;
import com.ssm.beans.Msg;
import com.ssm.service.DeptService;

/*
 * 处理和部门有关的请求
 */
@Controller
public class DeptController {
	@Autowired
	private DeptService deptservice;
	/*
	 * 返回所有的部门信息
	 */
	@RequestMapping("/depts")
	@ResponseBody
	public Msg getDept(){
		List<Department> list=deptservice.getDept();
		return Msg.success().add("depts", list);
		
	}
}

展示:获取到部门信息
在这里插入图片描述
获取完数据后,我们要完成的便是添加数据了

URI 请求 根据请求方式不同来完成不同操作
/emp/{id} GET 是获取查询
/emp POST 是添加
/emp/{id} PUT是修改
/emp/{id} DELETE删除

接下来便是获取模态框中form中的数据,jquery为我们提供了**serialize()**这个方法可以让我们将其中的数据进行封装获取
点击保存按钮后执行ajax请求

$("#save").click(function(){
		//1.模态框中填写表单数据并将其提交给服务器保存
		var formdata=$("#addmodal form").serialize()//获取表单数据进行序列化,是jquery专门用于ajax请求的
		//alert(formdata)
		$.ajax({
			url:"${APP_PATH}/adduser",
			type:"POST",
			data:formdata,
			success:function(result){
				//alert(result.msg);
				
			}
		});
	});

完成后测试如图
在这里插入图片描述
但发现我们的逻辑应该是再添加完后,模态框消失并跳转至最后一页让我们看到自己添加的数据
因此改写加上模态框消除即可。
如此,便完成了数据添加操作。

码字不易,给个赞呗!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

彭祥.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值