客户端请求新页面和提交数据的四种方式
超链接 | 超链接+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>