一 : 在列表成功回调函数,追加数据中,添加修改的按钮
for (let x of res) {//追加数据$("#table").append(`<tr><td><input type="checkbox" class="ck" value="\${x.uid}"></td><td>\${x.uid}</td><td>\${x.userName}</td><td>\${x.state==0?"启用":"禁用"}</td><td>\${x.time}</td><td><input type="button" value="修改" onclick="toUpd(\${x.uid})" ><input type="button" value="删除" onclick="UserDel(\${x.uid})" ><input type="button" value="修改角色" onclick="setRole(\${x.uid})"></td></tr>`)}},一 ①: 修改使用id路径传参
/*** 回显 先回显再去修改的页面** @param goodsId*/function goodsUpd(goodsId) {/*跳转路径去修改页面*/location.href="upd.jsp?goodsId="+goodsId;}
二 : upd.jsp页面
1.创建需要修改的文本框
<%--创建回显的文本框 不要名字 这个月都没有名字--%>
<%--用户ID : <input type="text" id="uid"><br>--%>
用户姓名 : <input type="text" id="userName"><br>
用户状态 : <input type="text" id="state"><br>2.修改按钮
<%--修改按钮--%>
<input type="button" value="修改" id="upd">3.修改路径传参需要接参
<%--获取路径传参的值--%>
<input type="hidden" value="${param.goodsId}" id="goodsId">4.head中写预加载数据使用文档就绪函数
3.① :文档就绪函数
$(function{
1.调用回显的函数
})
//文档就绪函数 回显的$(function () {//调用回显的函数findById()})3.② : 回显的函数方法
function findById(){
1.取值 (取的是需要修改的字段,修改/回显/删除 都是根据id进行的)
2.非空校验
3.组装对象
回显组装对象获取的也是需要修改的字段
4.ajax
}
/*回显函数*/function findById() {/*取值*/let goodsId=$("#goodsId").val()/*非空校验*/if (!goodsId){alert("请先输入")//用来结束使用的return;}/*组装对象*/let obj={goodsId:goodsId}/*ajax*/$.ajax({url:"/goods/findById", //请求路径type:"post",//请求方法data:{reqInfos:JSON.stringify(obj)}, //路径转换dataType:"json", //解析success(res){//打印console.log(res)//获取值$("#goodsId").val(res.goodsId)$("#goodsCode").val(res.goodsCode)$("#goodsName").val(res.goodsName)$("#price").val(res.price)$("#num").val(res.num)$("#time").val(res.time)$("#typeId").val(res.typeId)$("#supplierId").val(res.supplierId)$("#imgUrl").attr("src","/file/showImg?imgUrl="+res.imgUrl)},error(){alert("不要进来了,出错了")}})}5. 在body下面脚本里
5.①给修改按按钮绑定点击事件
1.取值
2.组装对象
3.ajax ( 成功回调函数中修改完跳转列表页面 )
/*** 给修改绑定一个点击事件*/$("#goodsUpd").click(function () {//要传传路径let imgUrl =""//获取第一个图片let file = $("#file")[0].files[0];//new FormData 对象let formData = new FormData;//获将图片添加到对象formData.append("file",file)$.ajax({url: "/file/upload",type: "post",data: formData,async: false,cache: false,contentType: false,processData: false,dataType: "json",success(res) {imgUrl=res},error() {alert("图片加载失败")}})//取值let goodsId = $("#goodsId").val()let goodsCode = $("#goodsCode").val()let goodsName = $("#goodsName").val()let price = $("#price").val()let num = $("#num").val()let time = $("#time").val()let typeId = $("#typeId").val()let supplierId = $("#supplierId").val()//非空校验if (!goodsId || !goodsCode || !goodsName || !price || !num || !time || !typeId || !supplierId){alert("请先输入")return;}//组装对象let obj={goodsId,goodsCode,goodsName,price,num,time,typeId,supplierId,imgUrl}/*ajax*/$.ajax({url:"/goods/goodsUpd", //请求路径type:"post",//请求方法data:{reqInfos:JSON.stringify(obj)}, //路径转换dataType:"json", //解析success(res){//打印console.log(res)if (res===200){/*** 跳转列表页面* @type {string}*/location.href="list.jsp"}},error(){alert("不要进来了,出错了")}})})三 : Controller层
1.接参
2.将json对象转换成ava对象
3.将转换后的对象传给service
4.处理返回值响应给用户(添加/修改/删除 返200)
/*** 修改*/protected void goodsUpd(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//接参String reqInfos = req.getParameter("reqInfos");//将json对象转换成Java对象GoodsVo goodsVo = JSONObject.parseObject(reqInfos, GoodsVo.class);//将转换后对象传给serviceservice.goodsUpd(goodsVo);//处理返回结果响应给用户resp.getWriter().println(JSONObject.toJSONString(200));}四 : service层
1.调用dao层方法
2.处理返回值
/*** 回显* @param goodsId* @return*/@Overridepublic GoodsVo findById(Integer goodsId) {//调用dao层方法//处理返回值return goodsDao.findById(goodsId);}/*** 修改* @param goodsVo*/@Overridepublic void goodsUpd(GoodsVo goodsVo) {goodsDao.goodsUpd(goodsVo);}五 : dao层
1.定义sql语句
2.执行sql语句
/*** 回显* @param goodsId* @return*/@Overridepublic GoodsVo findById(Integer goodsId) {/*定义sql语句*/String sql="SELECT *FROM t_goods WHERE goods_id=? ";/*执行sql语句*/return baseQueryOne(GoodsVo.class,sql,goodsId);}/*** 修改* @param goodsVo*/@Overridepublic void goodsUpd(GoodsVo goodsVo) {/*定义sql*/String sql="UPDATE t_goods SET goods_code=?,goods_name=?,price=?,num=?,time=?,type_id=?,supplier_id=?,img_url=? WHERE goods_id=?";/*执行sql语句*/baseUpdate(sql,goodsVo.getGoodsCode(),goodsVo.getGoodsName(),goodsVo.getPrice(),goodsVo.getNum(),goodsVo.getTime(),goodsVo.getTypeId(), goodsVo.getSupplierId(),goodsVo.getImgUrl(),goodsVo.getGoodsId());}
)
 的使用详解)
