ajax传数据post方式变成get方式

问题如下：使用AJAX提交数据，方式是POST，但是还是能够在地址栏中看到提交的信息，即是用的GET方式提交<!DOCTYPE html><html><head><meta charset="utf-8"><link href="css...

二木成林

1981人浏览 · 2019-10-04 20:14:54

二木成林 · 2019-10-04 20:14:54 发布

问题

如下：使用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>

效果展示

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

【计算机视觉】Pixel逐像素分类&Mask掩码分类理解摘要

魔乐社区

计算机视觉（opencv）实战三十二——CascadeClassifier 人脸微笑检测（摄像头）

本文从原理到实现，详细介绍了基于 OpenCV Haar 分类器的人脸与微笑检测：讲解了 Haar 特征和级联检测原理。对代码逐行拆解并解释参数含义。画出完整流程图，帮助理解执行过程。给出了常见问题和优化建议，甚至扩展到深度学习方法。这种方法简单、轻量、实时性好，非常适合入门和小型应用项目。但如果需要更高准确率和更强鲁棒性，建议使用深度学习检测器替代 Haar 分类器。