1.フロントエンドインターフェースは、単純な関数であります
1.1js変更のセックス選択ボタンコンテンツ
ただ、ボタンのonClickイベントを追加、変更にDOMのinnerHTMLを使ってJS
function setMan(){
var dropMenu1=document.getElementById("dropdownMenu1");
dropMenu1.innerHTML="男";
}
1.2jsボタンの変更の背景色を達成
ただ、onMouseInとONMOUSEOUTイベントボタンを追加し、jsはDOMとbackground属性のスタイルを変更します
function setColor(){
document.getElementById("submitButton").style.background="#3288CE";
}
フロントエンドコンテンツの合法性を確認してください。2.
フォームは、例えば、空にすることはできません、提出されたコンテンツの合法性をチェックすることをお勧めし、ボタンはすでになど、選択されています
呂SSM 2個の卵は原則を開発：フロントエンドサーバーとして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
データ型：セットの戻り値の型のテキスト
のcontentType：設定要求ボディタイプtext / htmlのか、アプリケーション/ JSONセットUTFとして8でエンコードされた。
データ：セットの文字列型は、コンテンツJSON要求された
パスセット「/ loaduser」：URL
タイプ：リクエスト設定ポストのタイプを/ GET
機能（データ）} {呼び出し200返す応答ステータスコード：成功
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>
