jsp与html交互

原创 2012年03月25日 16:51:10

1、要使jsp文件运行,必须进行的配置
 在Tomcat下的(webroot)webapps目录下创建自己的程序目录myjsp
 另外;myecplise已经配置好WEB-INF及其下的web.xml文件-------可以放在myjsp下面,也可以并

列放在同一目录中

文本框的使用
html中,通过表单<form action="03.jsp" method="post"></form>
文本框中的text 类型,password类型,type和name属性不可省略。在jsp中通过request.getParameter

("name属性值");

textarea-----------------html
<html>
  <head>
    <title>test_textarea.html</title>
 </head>
  <body>
  <form action="test_textarea.jsp" method="post">
   <p>留言:</p>
   <p><textarea name="Memo" rows="4" cols="60"></textarea></p> //textarea的声明
   <p><input type ="submit" value="提交" /></p>    //value不是values
   </form>
  </body>
</html>
--------------------------------------------------jsp
<%@ page contentType="text/html;charset=GBK" %>   //打印汉字的必须要写
<html>
  <head>
   
    <title>My JSP 'test_textarea.jsp' starting page</title>
    </head>
   <body bgcolor="#ffffff">
  <h2 align="center">Textarea Demo - Your Input is</h2>
  <hr>
  <%  request.setCharacterEncoding("GBK");   //输出调用的也是必须

的,否则是乱码
   String Memo = request.getParameter("Memo");
   out.println(Memo);
   %>
  </body>
</html>
————————————————————————————————————————————
<%@ page contentType="text/html;charset=GBK" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>

   
    <title>My JSP 'test_textarea1.jsp' starting page</title>
   

  </head>
 
  <body>
  <%!   //方法必须用叹号标记
   StringBuffer myTanslate(StringBuffer sour) {
   for(int i = 0; i < sour.length(); i++) {
   if(sour.substring(i,i+1).equals("\n")) {
    sour.delete(i,i+1);
    sour.insert(i,"<br>");
   }
   }
   return sour;
   }
   %>//两种方法可以改进
   <% request.setCharacterEncoding("GBK");
   String Mem = request.getParameter("Memo");
   //StringBuffer sb = new StringBuffer(Mem);
   //for(int i = 0; i < sb.length(); i++) {
   // if(sb.substring(i,i+1).equals("\n")) {
   // sb.delete(i,i+1);
   // sb.insert(i,"<br>");
   // }
   // }
   // out.println(sb);
   StringBuffer sb = new StringBuffer(Mem);
   sb = myTanslate(sb);
   out.println(sb);
   
   %>
  </body>
</html>

列表框的使用------------------------------单选,复习html中的房源问题,验证问题,下一题中是多


--------------------------____________________________________-----------html
<html>
  <head>
    <title>test_select.html</title>

  </head>
 
  <body>
  <form action="test_select.jsp" method="post">
  <p>
  <select name="City"><!-- 如果是要框框的,就把size去掉     size="4" -->
  <option value="beijing">北京市</option>
  <option>上海市</option>
  <option>重庆市</option>
  <option selected>周口市</option>
  </select></p>
  <p><input type="submit" value="提 交"/></p>
  <hr>
  </form>
  </body>
</html>
---------------------------_____________________________________________________jsp
<%@ page contentType="text/html;charset=GBK" %>
<% request.setCharacterEncoding("GBK"); %><!-- 必须要引用-->
<html>
  <head>
 <title>My JSP 'test_select.jsp' starting page</title>
</head>
 
  <body><!-- 下面的jsp语句是等号连接-->
 <p align="center" >您选择的城市是" <%= request.getParameter("City") %>".
</p>
  </body>
</html>
—————————————————————————————支持多选html

<html>
  <head>
    <title>test_select1.html</title>


  </head>
 
  <body>
    <hr>
    <form action="test_select1.jsp" method="post">
    <select name="fruit" multiple size="6">
       <optgroup label="水果">
    <option>苹果</option>
    <option>橘子</option>
    <option>香蕉</option>
    <option>芒果</option>
    </optgroup>
    <optgroup label="蔬菜">
      <option>大葱</option>
    <option>大蒜</option>
    <option>洋葱</option>
    </optgroup>
    </select>
    <p><input type="submit" value="提 交"/></p>
   
    </form>
  </body>
</html>
——————————————————————————————jsp
<%@ page contentType="text/html;charset=GBK" %>
<% request.setCharacterEncoding("GBK");
 String fruit[] = request.getParameterValues("fruit");//此处是getPramaterValues();
 %>
<html>
  <head>
    <title>My JSP 'test_select1.jsp' starting page</title>


  </head>

  <body>
    <ul>
   <%
   for(int i = 0; i < fruit.length; i++) {
     out.println("<li>"+fruit[i]);
   }
    %>
    </ul>
  </body>
</html>

复选框————————————————————————————————jsp
<%@ page contentType="text/html;charset=GBK" %>
<html>
  <head>

   
    <title>My JSP 'test_checkbox.jsp' starting page</title>


  </head>
 
  <body>
   <%
     request.setCharacterEncoding("GBK");
     String b[] = request.getParameterValues("Book");//数组对应values
     if(b != null) {//判断数组不为空
      for(int i = 0; i<b.length; i++) {
       out.println(b[i]+"<br>");
      }
     }
    %>
  </body>
</html>
________________________________————————————————————html
<html>
  <head>
    <title>test_checkbox.html</title>

  </head>
 
  <body>
 <form action="test_checkbox.jsp" method="post">
 <input type="checkbox" name="Book" value="数学" />数学<br>
 <input type="checkbox" name="Book" value="语文" />语文<br>
 <input type="checkbox" name="Book" value="英语" />英语<br>
 <input type="checkbox" name="Book" value="日语" />日语<br>
 <p><input type="submit" value="提 交" /></p>
 </form>
  </body>
</html>
————————————————————---单选按钮----------html
<html>
  <head>
    <title>test_radio.html</title>


  </head>
 
  <body>
   <form action="test_radio.jsp" method="post">
   <input type="radio" name="sex" value="男" checked="checked"/>男
    <input type="radio" name="sex" value="女"/>女
    <p><input type="submit" value="提 交"/></p>
   </form>
  </body>
</html>
——————————————————————————————jsp
<%@ page contentType="text/html;charset=gbk" %>
<%request.setCharacterEncoding("gbk"); %>
<html>
  <head>

    <title>My JSP 'test_radio.jsp' starting page</title>
   

  </head>
 
  <body>
   <%
    String str = request.getParameter("sex");
    out.println("您选择的是;"+str);
     %>
  </body>
</html>
_____________________——————————————————自提交需要把页面作为jsp的,把以上案

例中的.html和.jsp文件组合成一个jsp文件,有两种方式,提倡把HTML中的固定标记都提出来,只有需要

动态生成的内容才放到jsp的"<%%>"标记中
<%@ page contentType = "text/html;charset=gbk" %>
<% request.setCharacterEncoding("gbk"); %>
<html>
  <head>
 <title>My JSP 'jsp_html.jsp' starting page</title>
</head>
 
  <body>
  <h2 align="center">表单与jsp程序的合体
  </h2>
  <hr>
  <%
   if(request.getParameter("send")==null) {
   %>
 <form action="jsp_html.jsp" method = "get">
 <input type="hidden" name="send" value="send" />
 
 <p>姓名:
 <input type="text" name="username" /></p>
 <p>兴趣:
 <input type="text" name= "love" /></p>
 
 <p><input type="submit" value="传 送"/></p>
 </form>
 <% } else { %>
 <h2 align="center"><%= request.getParameter("username") %>
 欢迎你,你喜欢的是<%= request.getParameter("love") %>!
 </h2>
 <%} %>
  </body>
</html>
------------------------------------------------jsp页面和客户端脚本的结合
在客户端的验证实现,可以通过javascript
在服务器端的验证实现需要用到jsp

综合练习:实现图片的提交按钮,在客户端自检验姓名输入,若没有输入姓名则弹出对话框
<html>
  <head>
    <title>test_picture.html</title>
 <script type="text/javascript">
 function mycheck() {
 if(document.myform.username.value=="") { //这个地方不提示
  alert("请输入姓名");
  return;
 }
  document.myform.submit();
 }
 </script>

  </head>
 
  <body>
  <form  name="myform" action="test_picture.jsp" method="post">
 请输入姓名:
 <input type="text" name="username"><br>
 <img src = "menv.jpg" width=100 height=20 onclick="mycheck()" />
</form>
  </body>
</html>
——————————————————————————jsp
<%@ page contentType="text/html;charset=GBK" %>
<% request.setCharacterEncoding("gbk"); %>
<html>
  <head>

   
    <title>My JSP 'test_picture.jsp' starting page</title>
   

  </head>
 
  <body>
 <%
  out.println(request.getParameter("username"));
  %>
  </body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

html和jsp的区别--静态页面和动态页面的区别

一、静态web页面,一般指html: 1、在静态Web程序中,客户端使用Web浏览器(IE、FireFox等)经过网络(Network)连接到服务器上,使用HTTP协议发起一个请求(Reques...
  • xuaman
  • xuaman
  • 2017-04-06 15:43
  • 3515
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)