录屏实践jspservletajax(已实践过类似练习)

 

 

 

【开始录屏】

创建表

名字首字母+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’  onclick=’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=’#’  onclick=’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’  onkeyup=”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’  onclick=’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=’#’  onclick=’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’  onkeyup=”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

 

【录屏结束】