关于按钮button和sumbit
代码实例:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" >
$(function(){
$("#loginBtn").click(function () {
//收集用户信息.
var loginAct = $.trim($("#loginAct").val());
var loginPwd = $.trim($("#loginPwd").val());
var isRemPwd = $("#isRemPwd").prop("checked");
if(loginAct == ""){
return;
}
if(loginPwd == ""){
return;
}
$.ajax({
url:'settings/qx/user/login.do',//这里最前面没有斜杠是我们页面是基于上面的basePath,这个basePath最后面是加/的
data:{
loginAct:loginAct,
loginPwd:loginPwd,
isRemPwd:isRemPwd
},
type:'post',
dataType:'json',
success:function (data) {
alert(data.code)
if(data.code=="1"){
//跳转到业务主页面,为什么不能直接跳转到对应页面.
//因为web-inf是受保护的,用户不能直接访问web-inf下面的资源.
window.location.href="workbench/index.do";
}else{
//提示信息
$("#msg").text(data.message);
}
}
});
});
});
</script>
</head>
<body>
<div style="position: absolute; top: 0px; left: 0px; width: 60%;">
<img src="图片名称" style="width: 100%; height: 90%; position: relative; top: 50px;">
</div>
<div id="top" style="height: 50px; background-color: #3C3C3C; width: 100%;">
<div style="position: absolute; top: 5px; left: 0px; font-size: 30px; font-weight: 400; color: white; font-family: 'times new roman'">CRM <span style="font-size: 12px;">©2019 动力节点</span></div>
</div>
<div style="position: absolute; top: 120px; right: 100px;width:450px;height:400px;border:1px solid #D5D5D5">
<div style="position: absolute; top: 0px; right: 60px;">
<div class="page-header">
<h1>登录</h1>
</div>
<form action="workbench/index.html" class="form-horizontal" role="form">
<div class="form-group form-group-lg">
<div style="width: 350px;">
<input class="form-control" type="text" id="loginAct" placeholder="用户名">
</div>
<div style="width: 350px; position: relative;top: 20px;">
<input class="form-control" type="password" id="loginPwd" placeholder="密码">
</div>
<div class="checkbox" style="position: relative;top: 30px; left: 10px;">
<label>
<input type="checkbox" id="isRemPwd"> 十天内免登录
</label>
<span id="msg"></span>
</div>
<button type="button" id="loginBtn" class="btn btn-primary btn-lg btn-block" style="width: 350px; position: relative;top: 45px;">登录</button>
</div>
</form>
</div>
</div>
</body>
</html>
先说一下我们的代码:<button>标签是在一个form表单里面,然后我们使用id标签在javascript里面又写了一个click点击事件
并且我们的<button>标签错误的写成了 type="submit",这导致了重复.
我们在使用按钮标签的时候,type="button"和type="submit"一定要使用正确了,当我们使用javascript去响应按钮的时候就不要使用type="submit"了,因为会造成重复,并且经过我实际测试,我是找了一晚上bug,得出的深刻教训,经过我的实际测试,如果你重复写了那么程序执行的是type="submit",它会走form标签里面的action属性下的路径,不会走javascript里面的click事件,所以我们一定不要写错了.
