问题
如下:使用AJAX提交数据,方式是POST,但是还是能够在地址栏中看到提交的信息,即是用的GET方式提交
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="js/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="js/bootstrap.min.js"></script>
<title>注册</title>
<link rel="stylesheet" type="text/css" href="css/basic.css" />
</head>
<body>
<div class="jumbotron" align="center">
<form id="registerForm">
<table cellspacing="0" cellpadding="0">
<tr align="center">
<th colspan="3" style="text-align: center;">
<h2>用户注册</h2>
</th>
</tr>
<tr>
<td class="text-muted">身份:</td>
<td colspan="2">
<select class="form-control" name="identity">
<option value="请选择身份">请选择身份</option>
<option value="学生">学生</option>
<option value="教师">教师</option>
<option value="管理员">管理员</option>
</select>
</td>
</tr>
<tr>
<td class="text-muted">用户名:</td>
<td colspan="2"><input class="form-control" placeholder="请输入账号" type="text" name="username"></td>
</tr>
<tr>
<td class="text-muted">密码:</td>
<td colspan="2"><input class="form-control" placeholder="请输入密码" type="password" name="password"></td>
</tr>
<tr>
<td class="text-muted">验证码:</td>
<td><input class="form-control" type="text" name="verificationCode"></td>
<td><img src="#" onclick="changeImg"></td>
</tr>
<tr align="center">
<td><input class="btn btn-primary" type="submit" value="注册" onclick="register()"></td>
<td><input class="btn btn-warning" type="reset" value="重置"></td>
</tr>
<tr align="center">
<td colspan="3" class="text-muted">已有账号?立即<a href="login.html">登录</a></td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
function register() {
$.ajax({
type:"POST",// 传数据的方式
url:"registerServlet",// servlet的地址
data:$('#registerForm').serialize(), //传的数据form表单里面的数据
success:function (result) {//传数据成功之后的操作,result是servlet传过来的数据,这个函数对result进行处理
// 将从后端传过来的数据再次解析成JSON
var jsonResult = JSON.parse(result);
var identity = jsonResult.identity;
var username = jsonResult.username;
var password = jsonResult.password;
alert("身份:"+identity+";用户名:"+username+";密码:"+password);// 通过alert方法显示
}
})
}
</script>
</body>
</html>
原因
提交按钮是使用的submit,即GET默认方式提交。
解决
将type="submit"修改为type="button"
修改后的源码为:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="js/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="js/bootstrap.min.js"></script>
<title>注册</title>
<link rel="stylesheet" type="text/css" href="css/basic.css" />
</head>
<body>
<div class="jumbotron" align="center">
<form id="registerForm">
<table cellspacing="0" cellpadding="0">
<tr align="center">
<th colspan="3" style="text-align: center;">
<h2>用户注册</h2>
</th>
</tr>
<tr>
<td class="text-muted">身份:</td>
<td colspan="2">
<select class="form-control" name="identity">
<option value="请选择身份">请选择身份</option>
<option value="学生">学生</option>
<option value="教师">教师</option>
<option value="管理员">管理员</option>
</select>
</td>
</tr>
<tr>
<td class="text-muted">用户名:</td>
<td colspan="2"><input class="form-control" placeholder="请输入账号" type="text" name="username"></td>
</tr>
<tr>
<td class="text-muted">密码:</td>
<td colspan="2"><input class="form-control" placeholder="请输入密码" type="password" name="password"></td>
</tr>
<tr>
<td class="text-muted">验证码:</td>
<td><input class="form-control" type="text" name="verificationCode"></td>
<td><img src="#" onclick="changeImg"></td>
</tr>
<tr align="center">
<td><input class="btn btn-primary" type="submit" value="注册" onclick="register()"></td>
<td><input class="btn btn-warning" type="reset" value="重置"></td>
</tr>
<tr align="center">
<td colspan="3" class="text-muted">已有账号?立即<a href="login.html">登录</a></td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
function register() {
$.ajax({
type:"POST",// 传数据的方式
url:"registerServlet",// servlet的地址
data:$('#registerForm').serialize(), //传的数据form表单里面的数据
success:function (result) {//传数据成功之后的操作,result是servlet传过来的数据,这个函数对result进行处理
// 将从后端传过来的数据再次解析成JSON
var jsonResult = JSON.parse(result);
var identity = jsonResult.identity;
var username = jsonResult.username;
var password = jsonResult.password;
alert("身份:"+identity+";用户名:"+username+";密码:"+password);// 通过alert方法显示
}
})
}
</script>
</body>
</html>
效果展示