ajax传数据post方式变成get方式
  TEZNKK3IfmPf 2023年11月13日 29 0

问题

如下:使用AJAX提交数据,方式是POST,但是还是能够在地址栏中看到提交的信息,即是用的GET方式提交

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默认方式提交。

ajax传数据post方式变成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>

效果展示

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

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月13日 0

暂无评论

推荐阅读
  TEZNKK3IfmPf   2023年11月14日   17   0   0 ajax前端javascript
  TEZNKK3IfmPf   2024年03月22日   91   0   0 ajaxjavascript
  TEZNKK3IfmPf   2023年11月14日   26   0   0 ajax
  TEZNKK3IfmPf   2023年11月15日   25   0   0 ajaxjs
  TEZNKK3IfmPf   2023年11月14日   19   0   0 ajax前端javascript
  TEZNKK3IfmPf   2023年11月14日   24   0   0 ajaxjQuery
  TEZNKK3IfmPf   2023年11月14日   13   0   0 ajaxjQuery
  TEZNKK3IfmPf   2023年11月14日   20   0   0 elasticsearchtype
  TEZNKK3IfmPf   2023年11月14日   26   0   0 ajax
  TEZNKK3IfmPf   17天前   29   0   0 ajaxxml
  TEZNKK3IfmPf   2023年11月14日   34   0   0 ajaxjQuery
TEZNKK3IfmPf