客户端请求页面的方式和提交数据的方式

1.超链接

 <!-- 使用超链接请求到新页面-->
  <!--超链接到page2,弹出新窗口-->
  <a href="page2.jsp" target="_blant">链接到page2</a></br>
  <!--相对路径超链接到page2-->
  <a href="./page2.jsp"> 链接到page2</a></br>
  <a href="../demo1/page2.jsp"> 链接到page2</a></br>
  <!--绝对路径连接到page2 request.getContextPath() 取得网站域名-->
  <a href="http://localhost:8080/web2/demo1/page2.jsp"> 链接到page2</a></br>
  <a href="<%=request.getContextPath() %>/demo1/page2.jsp"> 链接到page2</a></br>
  <!--连接到Page2并传参uid需要在page2中接受-->
  <a href="page2.jsp?uid=admin"> 链接到page2</a></br>

2.超链接+js

 

3,summit 提交表单(验证后)

1 <script>
2 funtion fun(){
3   var uid=document.getElementById("uid").value;
    if(uid==""){
      alert("请输入用户名");
       rutern false;
   }
  return true; 4 } 5 </script> 6 <from action="page2,jsp" method="post" > 7 <input type="text" name="uid" id="uid"> 8 <input type="sumbit" value="提交表单" onclic="fun()"> 9 </from>

4。url 方式提交

1 <from action="page2.jsp?uid=admin" method="post" >
2 7 <input type="text" name="uid" id="uid">
3 8 <input type="sumbit" value="提交表单">
4 9 </from>

 

5.hidden 方式提交

1 <from action="page2,jsp" method="post" >
2 7 <input type="hidden" value="admin"id="uid">
3 8 <input type="sumbit" value="提交表单" ">
4 <script>
5   document.getElementById("uid").value="admin2";
6 </script>
7 9 </from>

 

6.button+js提交表单

1 <from action="page2,jsp" method="post" id="fff">
2 7 <input type="hidden" value="admin"id="uid">
3 8 <input type="button" value="提交表单"  onclic='document.getElementById("fff").submit();'>
7 9 </from>

 

7<a>+js提交表单

1 <from action="page2,jsp" method="post" id="from1">
2  <input type="hidden" value="admin"id="uid">
3     <a href='javascript:doucment.getElementById("from1").submit();'>提交表单</a>
4  </from>

 

  数据提交方式 特点及适用场合
超链接 get

只能提交字符串,数据会显示在url后面,适用于

比较简单的页面请求,提交的数据为非敏感数据。

超链接+js get

与上面方式的不同点是:适用于请求新页面

前需要使用js进行处理的情况。

submit按钮

提交表单

一般使用post

能提交各种类型数据,安全性好。适用于提交

用户输入的数据非用户输入的数据可以使用

hidden元素提交。

使用js

提交表单

一般使用post

与上面方式的不同点是:使用<a>,button等

元素的属性或事件调用javascript提交表单,

适用于提交数据前需要使用js惊醒处理是,以及

上不适合显示submit按钮时

posted on 2015-05-28 15:28  Longevity  阅读(654)  评论(0编辑  收藏  举报