一 : 在列表页面,写添加按钮,跳转添加页面

  <%--添加按钮--%><input type="button" value="添加" id="add">

 /*** 跳转添加页面*/$("#add").click(function () {//跳转到添加页面location.href="add.jsp";})

二 : add.jsp 页面

1.添加字段的文本框 

        1① : 下拉框文本框写法:

<%--下拉框--%>客户级别ID: <select id="levelId"><option value="">请选择</option></select><br>

         1② : 图片文本框写法:   图片用的是img

<%--图片文本框写发--%>上传图片: <img src="" alt="" height="45" width="35" id="imgUrl"><input type="file" id="file" onchange="showImg(this)">

<%--添加文本框--%>客户编号:<span id="clientCode"></span><br>
<%--下拉框--%>客户级别ID: <select id="levelId"><option value="">请选择</option></select><br>客户简化:<input type="text" id="clientSimplify"><br>客户名称:<input type="text" id="clientName"><br>所在区域id: <select id="areaId"><option value="">请选择</option></select><br>地址:<span id="addr"></span><br>联系方式:<input type="text" id="phone"><span id="phoneSpan"></span> <br><%--图片文本框写发--%>上传图片: <img src="" alt="" height="45" width="35" id="imgUrl"><input type="file" id="file" onchange="showImg(this)">

2.添加按钮 

<%--添加按钮--%><input type="button" value="添加" id="add">

3 .head中写让预加载数据

        3① : 文档就绪函数

        $(function(){

                //随机单号

                //按照制定的格式输出随机单号

                //调用下拉框

         })

//文档就绪函数/*** 定义函数获取随机单号*/$(function () {//随机数let number = Math.floor(Math.random()*(99999-1000+1)+1000);//按照制定格式输出let  number1= "C-"+number;//给单号的Span赋值$("#clientCode").html(number1)//所在地区下拉框areaDrop()//客户级别下拉框levelDrop()})

3.② 预加载数据中下拉框写法

        注意 : 获取的是下拉框的文本框的字段 追加的值外键实体类中的字段,不要手写

/*** 客户级别下拉框*/function levelDrop() {$.ajax({url:"/clientLevel/levelDrop", //请求路径dataType: "json", //解析success(res) {//打印console.log(res)//循环追加数据for (let x of res) {$("#levelId").append(`<option value="\${x.levelId}">\${x.levelName}</option>`)}},error() {alert("下拉框添加失败")}})}

4 :  body下面 脚本 

                4.① : 给图片绑定点击事件

                        1.获取选中图片路径

                        2.创建文件阅读器

                        3.读取文件阅读

                        4.加载图片路径

                        reader.οnlοad=function(){

                                给图片赋值

                                $("#imgUrl").attr("src",this.result)

                        }

         /*** 给图片绑定点击事件*/function showImg(obj) {//获取选中的图片路径let file = obj.files[0];//创建文件阅读器let reader = new FileReader();//读取文件阅读器reader.readAsDataURL(file);//加载图片路径reader.onload=function () {//给图片赋值$("#imgUrl").attr("src",this.result);}}

        4.② 对添加的姓名进行唯一性校验

/*** 姓名唯一性校验*/$("#clientName").change(function () {//取值let name = $("#clientName").val();//非空校验if (!name){alert("请输入名称,不可为空")//结束return}//对名字进行校验let obj={name}$.ajax({url: "/client/onlyName",type: "post",data: {reqInfos: JSON.stringify(obj)},dataType: "json",success(res) {//打印console.log(res)if (res===0){alert("不重名,可以添加")}else {alert("改名称已经存在")//清空重复数据$("#name").val('')}},error() {alert("服务器故障")}})})

4.③ 给添加按钮绑定点击事件

/*** 添加按钮绑定点击事件*/$("#add").click(function () {let imgUrl ="";//创建formData对象let formData = new FormData;//获取选中的图片let file = $("#file")[0].files[0];//将图片放到创建的formData对象formData.append("file",file)//图片的ajax$.ajax({url: "/file/upload",type: "post",data: formData,async: false,cache: false,contentType: false,processData:  false,dataType: "json",success(res) {console.log(res)  //打印imgUrl=res},error() {alert("图片上传失败")}})//取值let clientCode = $("#clientCode").html()let levelId = $("#levelId").val()let clientSimplify = $("#clientSimplify").val()let clientName = $("#clientName").val()let areaId = $("#areaId").val()let addr = $("#addr").val()let phone = $("#phone").val()//组装添加的对象let obj={clientCode,levelId,clientSimplify,clientName,areaId,addr,phone,imgUrl}//添加的ajax$.ajax({url: "/client/clientAdd",type: "post",data: {reqInfos : JSON.stringify(obj)},dataType: "json",success(res) {console.log(res)  //打印if (res===200){alert("添加成功")//跳转页面location.href="list.jsp"}},error() {alert("添加失败")}})})

三 : Controller层 

1.创建服务器 :

         @WebServlet(" /list/* ")   双 /  第二个/后面是* 缺一不可,否则服务器起不来

2.定义列表的方法

        2.①Controller层四步走

                1.接参

                2.将json对象转换成java对象

                3.将转换后的对象传给service

                4.将处理后的结果响应给用户

                        添加,修改,删除,响应200

/*** 添加*/protected void clientAdd(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//接参String reqInfos = req.getParameter("reqInfos");//转换对象ClientVo clientVo = JSONObject.parseObject(reqInfos, ClientVo.class);//传给serviceservice.clientAdd(clientVo);//响应resp.getWriter().println(JSONObject.toJSONString(200));}

四 : Service层

        1.调用dao层方法,请求数据

        2.处理返回值

/*** 添加* @param clientVo*/@Overridepublic void clientAdd(ClientVo clientVo) {//调用dao层对象clientDao.clientAdd(clientVo);}

五 : dao层

1.定义sql

2.执行sql

/*** 添加* @param clientVo*/@Overridepublic void clientAdd(ClientVo clientVo) {//定义sqlString sql="INSERT INTO t_client(client_code, level_id, client_simplify,client_name,area_id, addr,phone, img_url,client_del)\n" +"              VALUES(?,?,?,?,?,?,?,?,?)";//打印sql语句baseUpdate(sql,clientVo.getClientCode(),clientVo.getLevelId(),clientVo.getClientSimplify(),clientVo.getClientName(),clientVo.getAreaId(),clientVo.getAddr(),clientVo.getPhone(),clientVo.getImgUrl(),clientVo.getClientDel());}