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

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

超链接	超链接+js	submit按钮提交表单	使用js提交表单
打开新页面的方式 使用相对路径和绝对路径 使用url携带参数 提交数据的方式为get方式	window.location window.open();	先验证再提交表单。 使用hidden提交数据（非用户填写数据）	使用button+js 使用<a>+js 一般为post提交方式

1、超链接：

打开新页面：<a target="_blank">;

使用url携带参数： <a href="page2.jsp?uid=admin&pass=123">

注意：多个参数之间使用&连接，使用?表示携带参数；

2、超链接+js：

 

使用window.location

<script type="text/javascript">
 function fun(){
 
  window.location="page2.jsp";
 
 }

</script>

 

a链接的写法：<a href="javascript:fun();">链接到page2</a> href连接中调用fun函数。

 

使用window.open()

<script type="text/javascript">
function fun(){
 
  window.open("page2.jsp");--表示在新窗口打开链接。
 
}

</script>

a链接中：<a href="javascript:fun();">链接到page2</a>

 

3、使用submit按钮提交数据表单：注意action和method两个属性 表示的含义

 

对于用户输入数据：a、需要有用户输入框即<input type="text" name="username"/>在此输入框中输入数据。

b、有时需要先验证，再提交数据：

例：<input type="text" name="uid" id="uid"/>

 

function fun4(){
 
 var uid=document.getElementById("uid").value;--获取input输入框的vaule值
 if(uid==""){
  
  alert("请输入用户名");
  return false;---表示不提交数据
 }else{
  
  return true;--提交数据
  
 }

submit提交按钮<input type="submit" value="提交表单"  οnclick="return fun4();">

对于非用户输入数据：不需要input输入框

使用hidden提交数据：

<!-- 使用hidden提交数据 -->
<form action="page2.jsp" method="post">

<input type="hidden" name="uid" id="uid2" value="admin">
<input type="submit" value="提交表单"  ><br/>

<script type="text/javascript">
 document.getElementById("uid2").value="admin2";--两种参数值
 

</script>

</form>

4、使用js提交表单：

使用button+js提交：

button不具备提交功能：

<!-- 使用button和js提交表单 -->
<form action="page2.jsp" method="post" id="form1">

<input type="text" name="uid">
<input type="button" value="提交表单" οnclick='document.getElementById("form1").submit();'>---获取的是form标签对象

</form>

 

使用<a>+js提交表单

<!-- 使用<a>和js提交表单 -->
<form action="page2.jsp" method="post" id="form2">

<input type="text" name="uid">

<a href='javascript:document.getElementById("form2").submit();'>提交表单</a><br/>
</form>