【开始录屏】
创建表
名字首字母+abc（
i名字首字母 int pk,
ch名字首字母 char（20） not Null，
f名字首字母 float
）
eclipse/idea 创建web工程 wzhabc
在web下创建addWzhAbc.jsp
设计form表单
…….
<body>
<form action=”wzhabc.action” >
iwzh<input id=’iWzh’ name=’iWzh’> <br>
chwzh<input id=’chWzh’ name=’chWzh’> <br>
fwzh <input id=’fWzh’ name=’fWzh’> <br>
<input type=’submit’ value=’add’>
</form>
</body></html>
src下创建包com.名字首字母+abc.entity,包下创建表对应的类
package com.wzhabc.entity;
public class Wzhabc{
private int iWzh;
private String chWzh;
private float fWzh;
set/get
有参无参构造函数
}
在src下创建包 com.名字首字母+abc.servlet,在包下创建处理http协议相关的Servlet
package com.wzhabc.servlet;
…….
@WebSerlvet注解配置 【名称和URL】
public class WzhabcServlet extends HttpServlet{
重写doGet（。。。。。）{
调用doPost（。。。。）;
}
重写doPost（。。。。。）{
怎么获取用户输入的数据
String iWzh=request.getParameter（”iWzh”）;
String chWzh=request.getParameter（”chWzh”）;
String fWzh=request.getParameter（”fWzh”）;
String sql=”insert into wzhabc values(‘”+ iWzh +”’,’”+ chWzh +”’,’”+ fWzh +”’)”;
向浏览器输出sql语句
}
}
部署应用，访问增加界面，输入数据按提交按钮，看能否看到sql语句，并将sql复制到数据库客户端执行，并查看数据是否入库【录屏结束】
继续。。。。。
【开始录屏】
在src下创建包com.名字首字母abc.dao,手工输入操作数据库的类
【录屏结束】
【开始录屏】
将名称addWzhAbc.jsp修改为wzhabc.jap
…….
<script>
function dis(op){
if(op==”add”){
将id为show的标签display:none , id为wzhabc的标签display:block;
}else{
将id为show的标签display:block , id为wzhabc的标签display:none;
}
}
</script>
<body>
<div style=’margin:0 auto; width:810px;height:1600px;’>
<!-- header -->
<div style=”border:1px solid red;width:800px;heigth:400px;”>
</div>
<!-- center -->
<div style=”margin-top:20px; border:1px solid red;width:800px;heigth:700px;”>
<!-- showdata -->
<div id=”show” style=”margin:20px 20px; display:block; width:700px;heigth:600px;”>
<input type=’button’ value=’add’ οnclick=’dis(this.value)’>
<table> <tr> <td>iwzh</td> <td>chwzh</td> <td>fwzh</td> <td>op</td></tr>
<%
显示表数据【先手工增加数据到表】
out.print(“<tr>………<td><a href=’wzhabc.action?op=delete&iWzh=…’>del</a> 空格”);
out.print(“<a href=’#’ οnclick=’return modify()’>modify</a> </td></tr>”);
%>
</table>
</div>
<!-- form -->
<div id=”wzhabc” style=”margin:20px 20px; display:none; width:700px;heigth:600px;” >
<form action=”wzhabc.action” >
<input type=’hidden’ id=’op’ name=’op’ value=”insert”>
iwzh<input id=’iWzh’ name=’iWzh’ οnkeyup=”verify(this.value)”>
<font color=red id=”ts”></font>
<br>
chwzh<input id=’chWzh’ name=’chWzh’> <br>
fwzh <input id=’fWzh’ name=’fWzh’> <br>
<input type=’submit’ value=’add’>
<input type=’button’ value=’cancel’ οnclick=’dis(this.value)’>
</form>
</div>
</div>
<!-- footer -->
<div style=”margin-top:20px;border:1px solid red;width:800px;heigth:400px;”>
</div>
</div>
</body></html>
继续…..在增加表单增加一个隐藏字段op标识操作【录屏结束】
【开始录屏】
编辑Servlet实现增加、删除
public class WzhabcServlet extends HttpServlet{
重写doGet（。。。。。）{
调用doPost（。。。。）;
}
重写doPost（。。。。。）{
怎么获取用户输入的数据
String iWzh=request.getParameter（”iWzh”）;
String chWzh=request.getParameter（”chWzh”）;
String fWzh=request.getParameter（”fWzh”）;
String op= request.getParameter（”op”）;
String sql=null;
switch(op){
case “insert”:
sql=”insert into wzhabc values(‘”+ iWzh +”’,’”+ chWzh +”’,’”+ fWzh +”’)”;
执行sql语句；
break;
case “delete”:
sql=”delete from wzhabc where iwzh=‘”+ iWzh +”’”;
执行sql语句；
break;
case “update”:
break;
default :
break;
}
response.sendRedirect(“wzhabc.jsp”);
}
}
【录屏结束】
【开始录屏】
继续实现修改。。。。。。。。。。。。。。。。。。。。。
<%
显示表数据【先手工增加数据到表】
out.print(“<tr>………<td><a href=’wzhabc.action?op=delete&iWzh=…’>del</a> 空格”);
out.print(“<a href=’#’ οnclick=’return modify(三个字段数据作为实参)’>modify</a> </td></tr>”);
%>
在jsp的脚本中增加一个函数<script>
function dis(op){
}
function modify(iWzh,chWzh,fWzh){
alert(iWzh);
alert(chWzh);
alert(fWzh);
return false;
}
</script>
测试点击修改看能否弹出相应的数据，看到数据继续。。。。。
编辑表单：增加一个隐藏标签，记住主键字段值
<form action=”wzhabc.action” >
<input type=’hidden’ id=’op’ name=’op’ value=”insert”>
<input type=’hidden’ id=’oid’ name=’oid’ >
……
<input type=’submit’ id=”tj” value=’add’>
编辑js脚本:
<script> function dis(op){
if(op==”add”){
将id为show的标签display:none , id为wzhabc的标签display:block;
}else{
将id为show的标签display:block , id为wzhabc的标签display:none;
将id为op的标签 value修改为insert
将id为tj的标签 value修改为insert
}
}
function modify(iWzh,chWzh,fWzh){
将显示数据部分隐藏，表单部分显示
将数据赋值给表单相应的输入框，并将iWzh赋值给id为oid标签
将id为op的标签 value修改为update
将id为tj的标签 value修改为update
return false;
}
</script>
运行程序效果：首次看到显示数据界面，点击修改，显示修改界面，点击取消，显示数据界面，点击增加，显示增加界面
编辑servlet:
写一个update语句并执行
【录屏结束】
实现增加、删除、修改、显示后继续。。。。。。。。。。。。。。。。。。。。。。。
【开始录屏】
ajax校验主键字段是否存在
编辑表单
<input type=’hidden’ id=’oid’ name=’oid’ >
iwzh<input id=’iWzh’ name=’iWzh’ οnkeyup=”verify(this.value)”>
<font color=red id=”ts”></font>
<br>
编辑js脚本
function verify(iWzh){
假如iWzh不是数字返回
var op=取出id为op的值;
var oid=取出id为oid的值；
if(op==”update” && oid==iWzh ) 返回；
创建异步通信对象
var xmlHttp= new …….;
设定回调函数
xmlHttp.on…..=function (){
if( 请求完成 且 返回200 )
{
var res=取出返回文本；
if(在返回结果中索引yes字符串，存在)
提示已被占用
else
提示可以用；
}
}
发送异步请求
xmlHttp.open(“get”,” wzhabc.action?op=check&iWzh=”+iWzh);
xmlHttp.send();
}
编辑servlet；
case “check”:
if ( db.isExist(“select * from wzhabc where iwzh=’”+iWzh+”’”) )
向浏览器输出yes
else
输出no；
return；
break;
运行程序，测试能否校验主键字段值是否已被占用。
增加数据888 888 888，增加后修改 888 8888 8888，提交后再修改 888+8-8 8888 8888
【录屏结束】
1093
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
