临沂专业做网站,安徽观元建设有限公司网站,wordpress在php下安装教程,开发公司总经理岗位职责一、添加 要求#xff1a; 按下添加按钮出现一个板块输入添加的数据信息#xff0c;点击板块的添加按钮#xff0c;添加#xff1b;点击取消#xff0c;板块消失。 实现#xff1a; 1.首先#xff0c;设计页面输入框格式#xff0c;表格首行 2.从数据库里调数据 3.添加…一、添加 要求 按下添加按钮出现一个板块输入添加的数据信息点击板块的添加按钮添加点击取消板块消失。 实现 1.首先设计页面输入框格式表格首行 2.从数据库里调数据 3.添加 1.首先设计页面输入框格式表格首行
body商品名称input typetext classtextinput typebutton value查找 classsearchbtn input typebutton value添加 classaddbtn
table border1theadtrth商品名称/thth数量/thth价格/thth操作/th/tr/theadtbody!-- trtdid/tdtd姓名/tdtd年龄/tdtd性别/tdtd班级/tdthinput typebutton value修改input typebutton value删除/th/tr 2.从数据库里调数据 请求路径 请求方式 参数域 请求成功 请求失败 这里调数据不需要传参数把数据库返回的信息在表格后插入。
$(function(){//发起请求$.ajax({url:SearchProduct,//请求路径type:get,//请求方式success:function(value){//请求成功$(tbody).empty()var arrvalue.datafor(var i0;iarr.length;i){$(tbody).append(trtdarr[i].name/tdtdarr[i].num/tdtdarr[i].price/tdtdinput typebutton value修改 classupdate indexarr[i].nameinput typebutton value删除 classdelete indexarr[i].name/td/tr) }},error:function(){//请求失败alert(出错啦)},})
服务生接收请求执行逻辑 返回信息。查找数据后端返回数据
WebServlet(/SearchProduct)
public class SearchProduct extends HttpServlet {private static final long serialVersionUID 1L;/*** see HttpServlet#HttpServlet()*/public SearchProduct() {super();// TODO Auto-generated constructor stub}/*** see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 解决中文乱码request.setCharacterEncoding(utf-8);response.setCharacterEncoding(utf-8);
// 设置后端给前端返回的数据为json格式response.setContentType(text/json;charsetutf-8);
// 设置成这样必须有一个json格式// 接收参数
// 查找String sqlselect * from 商品表;String[] colums {name,num,price};String resMysqlUtil.getJsonBySql(sql, colums);System.out.println(res);
// 后端给前端返回数据response.getWriter().write(res); 后端数据如图 3.添加
$1.设计添加的版块样式刚开始隐藏只有点击“添加”按钮后显现
div classadd_model
添加
brbr
名称input typetext classnamebr
数量input typetext classnumbr
价格input typetext classpricebr
input typebutton value添加 classadd input typebutton value取消 classcancel
/div
.add_model{width:240px;heigth:150px;border:4px solid blue;margin-top:20px;padding:15px;display:none;}
$2. 点击“添加”按钮后
//显示添加模块$(.addbtn).on(click,function(){$(.add_model).css(display,block)}) $3. 输入框添加
#1. val() 获取输入框的值
#2. 前端获取的值传到后端请求路径请求方式参数域请求成功请求失败
//添加$(.addbtn).on(click,function(){//获取输入框里的值var name$(.name).val()var num$(.num).val()var price$(.price).val()console.log(name)console.log(num)console.log(price)$.ajax({url:AddServlet,//请求路径type:post,//请求方式data:{name,num,price},//参数域success:function(value){//请求成功console.log(value)//页面刷新location.reload()},error:function(){//请求失败alert(出错啦)},})})
#3.后端接收参数并返回信息
// 解决中文乱码request.setCharacterEncoding(utf-8);response.setCharacterEncoding(utf-8);//接收参数String namerequest.getParameter(name);String numrequest.getParameter(num);String pricerequest.getParameter(price);System.out.println(name);System.out.println(num);System.out.println(price);//添加String sqlinsert into 商品表(name,num,price) values(\name\,num,price);int n MysqlUtil.add(sql);//返回信息String res添加失败;if(n0) {res添加成功;}response.getWriter().write(res);}
#4.请求成功页面刷新
location.reload() $4.点击“取消”按钮板块消失
//隐藏添加模块$(.cancel).on(click,function(){$(.add_model).css(display,none)}) 4.效果 二、删除
1.同以上“添加”部分相同假设现在已经从数据库调出数据不再赘述同步骤一、添加 1.2.
2.删除
因“删除”键是从数据库调数据时后加的在表格的tbody里故需要在tbody里找“删除”按钮。在“添加”板块已经对“删除”按钮加class属性。
for(var i0;iarr.length;i){$(tbody).append(trtdarr[i].name/tdtdarr[i].num/tdtdarr[i].price/tdtdinput typebutton value修改 classupdate indexarr[i].nameinput typebutton value删除 classdelete indexarr[i].name/td/tr) }
tips:
我这里的index属性值设的是name如果有id可以设成id 1.在tbody里找到删除按钮
2.得到Index属性值
3.前端传入后端请求路径请求方式参数域请求成功请求失败
把得到的Index属性值传入后端
//删除$(tbody).on(click,.delete,function(){var id $(this).attr(index)$.ajax({url:DeleteServlet,//请求路径type:post,//请求方式data:{id},//参数域success:function(value){//请求成功alert(value)//页面刷新location.reload()},error:function(){//请求失败alert(出错啦)},})})
4.后端接收参数执行逻辑返回信息
// 解决中文乱码request.setCharacterEncoding(utf-8);response.setCharacterEncoding(utf-8);// 接收参数String idrequest.getParameter(id);
// 删除String sqldelete from 商品表 where name id;int numMysqlUtil.del(sql);
// 返回信息String res删除失败;if(num0) {res删除成功;}response.getWriter().write(res);} 3.效果 数据库数据如图 三、修改
要求
点击tbody中的修改按钮出现修改的板块
板块中要回显信息在原有的基础上修改信息。
点击“取消”按钮板块消失 实现
1. 前两个步骤还是同“添加”1.2.
2. 修改
$1. 设计修改的版块样式刚开始隐藏只有点击“添加”按钮后显现
div classupdate_model
修改
brbr
名称input typetext classu_namebr
数量input typetext classu_numbr
价格input typetext classu_pricebr
input typebutton value修改 classupdatebtn input typebutton value取消 classu_cancel
/div
.update_model{width:240px;heigth:150px;border:4px solid gold;margin-top:20px;padding:15px;display:none;}
隐藏模块 两个模块不冲突不同时显示
//显示添加模块$(.addbtn).on(click,function(){$(.add_model).css(display,block)$(.update_model).css(display,none)})
//隐藏修改模块$(.u_cancel).on(click,function(){$(.update_model).css(display,none)}) $2. 点击“修改”按钮后
#1.信息回显
用val()获取值
//修改弹框展示回显$(tbody).on(click,.update,function(){$(.add_model).css(display,none)$(.update_model).css(display,block)var id($(this).attr(index))$.ajax({url:SearchByName,//请求路径type:get,//请求方式data:{id},//参数域success:function(value){//请求成功console.log(value)var objvalue.data[0]$(.u_name).val(obj.name)$(.u_num).val(obj.num)$(.u_price).val(obj.price)$(.updatebtn).attr(index,obj.name)},error:function(){//请求失败alert(出错啦)},})})
// 解决中文乱码request.setCharacterEncoding(utf-8);response.setCharacterEncoding(utf-8);
// 设置后端给前端返回的数据为json格式response.setContentType(text/json;charsetutf-8);String idrequest.getParameter(id);
// 查找String sqlselect * from 商品表 where name id;String[] colums {name,num,price};String resMysqlUtil.getJsonBySql(sql, colums);System.out.println(res);
// 后端给前端返回数据response.getWriter().write(res);}#2.修改
传入参数name,num,price,id请求路径请求方式参数域请求成功请求失败
//修改$(.updatebtn).on(click,function(){//获取输入框里的值var name$(.u_name).val()var num$(.u_num).val()var price$(.u_price).val()var id$(this).attr(index)console.log(id)$.ajax({url:UpdateServlet,//请求路径type:post,//请求方式data:{name,num,price,id},//参数域success:function(value){//请求成功console.log(value)//页面刷新location.reload()},error:function(){//请求失败alert(修改出错啦)},})})
后端接收参数 并返回信息
// 解决中文乱码request.setCharacterEncoding(utf-8);response.setCharacterEncoding(utf-8);//接收参数String namerequest.getParameter(name);String numrequest.getParameter(num);String pricerequest.getParameter(price);String idrequest.getParameter(id);System.out.println(name);System.out.println(num);System.out.println(price);//修改String sqlupdate 商品表 set name\name\,numnum,priceprice where name\id\;int n MysqlUtil.add(sql);//返回信息String res修改失败;if(n0) {res修改成功;}response.getWriter().write(res);}
#3.请求成功页面刷新
location.reload() 3.效果
