1.前端界面的簡單功能
1.1js更改選擇性別按鈕內容
只需爲button增加一個onClick事件，js中用DOM改變innerHTML即可
function setMan(){
var dropMenu1=document.getElementById("dropdownMenu1");
dropMenu1.innerHTML="男";
}
1.2js實現按鈕的背景顏色變化
只需爲button增加一個onMouseIn和onMouseOut事件，js用DOM改變style的background屬性
function setColor(){
document.getElementById("submitButton").style.background="#3288CE";
}
2.在前端檢查內容是否合法
建議在表單提交時先檢查內容合法性，比如不能爲空，按鈕是否已經被選擇等
魯二蛋ssm開發原則:前端js儘可能阻止數據流向服務端
function submitUserForm(){
var name=document.getElementById("name").value;
var password=document.getElementById("password").value;
var sex=document.getElementById("dropdownMenu1").innerHTML;
//if(name.innerHTML=="")//輸入框無值時不是null而是空字符串
//alert(name.innerHTML+password.innerHTML+sex.innerHTML);
if(name==""||password==""){
alert("輸入框和密碼框內容不能爲空");
return;
}
if(sex!="男"&&sex!="女"){
alert("請選擇您的性別");
return;
}
submitFun(name,password,sex);
}
3.Ajax提交表單
dataType: 設置返回值類型text
contentType:設置請求體類型text/html或application/json 設置編碼爲utf-8
data:設置請求內容 字符串類型的json
url：設置路徑 “/loaduser”
type:設置請求類型post/get
success:返回響應狀態碼爲200，調用function(data){}
erro:返回響應狀態碼爲其它
function submitFun(name,password,sex){
var user={name:name,password:password,sex:sex};//json對象的參數名和函數的參數名可以相同
var userInText=JSON.stringify(user);
//alert(userInText);
$.ajax({
url:"loaduser",
type:"post",
data:userInText,
dataType:"text",
contentType:"application/json;charset=utf-8",
success:function(data){
//alert(data);
if(data=="success"){
alert("您的賬號已經成功註冊");
}
else if(data=="faileToInsert"){
alert("服務端出現異常，請聯繫管理員");
}
else if(data=="locatedUser"){
alert("該賬號已存在");
}
else{
alert("返回值異常");
}
},
erro:function(data){
alert(data);
}
});
}
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<div>
<div class="form-group">
<div class="input-group input-group-lg" style="width: 600px;margin:0 auto;margin-bottom: 30px;">
<span class="input-group-addon">賬號</span>
<input type="text" class="form-control" placeholder="這裏輸入您的賬號" id="name">
</div>
<div class="input-group input-group-lg" style="width: 600px;margin:0 auto;margin-bottom: 30px;">
<span class="input-group-addon">密碼</span>
<input type="text" class="form-control" placeholder="這裏輸入您的密碼" id="password">
</div>
<div style="margin:0 auto;width:600px;height: auto;" class="dropdown">
<label style="font-size: 14px;width: 50px;height: 34px;">性別</label>
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
data-toggle="dropdown" >
選擇您的性別
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" onClick="setMan()">
<a role="menuitem" tabindex="-1">男</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation" onClick="setWoman()">
<a role="menuitem" tabindex="-1">女</a>
</li>
</ul>
</div>
<div style="margin:0 auto;width: 300px;">
<button type="button" class="btn btn-default" id="submitButton" style="width:200px;height: 30px;" onMouseOver="setColor()" onMouseOut="reSetColor()" onClick="submitUserForm()">按鈕 1</button>
</div>
</div>
</div>
</body>
<script type="text/javascript">
function setMan(){
var dropMenu1=document.getElementById("dropdownMenu1");
dropMenu1.innerHTML="男";
}
function setWoman(){
var dropMenu1=document.getElementById("dropdownMenu1");
dropMenu1.innerHTML="女";
}
function setColor(){
document.getElementById("submitButton").style.background="#3288CE";
}
function reSetColor(){
document.getElementById("submitButton").style.background="white"
}
function submitUserForm(){
var name=document.getElementById("name").value;
var password=document.getElementById("password").value;
var sex=document.getElementById("dropdownMenu1").innerHTML;
//if(name.innerHTML=="")//輸入框無值時不是null而是空字符串
//alert(name.innerHTML+password.innerHTML+sex.innerHTML);
if(name==""||password==""){
alert("輸入框和密碼框內容不能爲空");
return;
}
if(sex!="男"&&sex!="女"){
alert("請選擇您的性別");
return;
}
submitFun(name,password,sex);
}
function submitFun(name,password,sex){
var user={name:name,password:password,sex:sex};//json對象的參數名和函數的參數名可以相同
var userInText=JSON.stringify(user);
//alert(userInText);
$.ajax({
url:"loaduser",
type:"post",
data:userInText,
dataType:"text",
contentType:"application/json;charset=utf-8",
success:function(data){
//alert(data);
if(data=="success"){
alert("您的賬號已經成功註冊");
}
else if(data=="faileToInsert"){
alert("服務端出現異常，請聯繫管理員");
}
else if(data=="locatedUser"){
alert("該賬號已存在");
}
else{
alert("返回值異常");
}
},
erro:function(data){
alert(data);
}
});
}
</script>
</html>
