关于前后台数据的提交方式

最新推荐文章于 2024-05-21 10:41:09 发布

笑烂脸

最新推荐文章于 2024-05-21 10:41:09 发布

阅读量727

点赞数 2

分类专栏： WEB 文章标签： ajax

本文链接：https://blog.csdn.net/weixin_43678301/article/details/108479236

版权

WEB 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

关于前后端的数据传输方式

1.前台页面的数据传送到后台的方式

1.1form表单提交【同步请求】

在前端页面中设置form表单，确定需要传递的参数name让用户输入，通过点击按钮后submit()提交到后台。

//前台代码
<form action="/abc/123" method = "get">
 	name:<input type="text" name="name">
	<br>
 	password:<input type="password" name="pwd">
	<input type="submit" value="登录">
</form>

表单提交通过key–value的方式，后台接收数据通过key获取值

protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		System.out.println("滴滴滴");
		String username = req.getParameter("name");
		String password = req.getParameter("pwd");
		System.out.println(username+"-----"+password);
	}

关于post请求和set请求

get请求时，请求参数放在请求地址栏url后面；而post提交方式时，请求参数是放在请求数据包中的实体内容中传递。
由于地址栏的数据有长度限制，所以get请求传输的数据量小，一般不能大于2kb，Post请求传输的数据大小没有限制。所以一般文件上传下载使用的是Post请求。
post安全性相对get较高。[登录提交用post]。默认情况是get请求
如下图

注意事项：

提交可以是按钮提交，但是必须设置属性为submit
get : 没有中文乱码：tomcat 8.0 get中文乱码问题已经处理好了
post：需要设置 req.setCharacterEncoding(“utf-8”); 编码格式

1.2.ajax传递参数【异步请求】

原生ajax【比较麻烦】

举个例子：在我们注册账号的时候，我们输入用户名的同时，会即时发送到后台进行验证，当有重复的用户名，马上进行提示；当用户名可以使用则提示可以使用。

//前台代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="" method="get">
			用户名<input type="text" id="name" /> <span id = "span"></span>
			<br />
			密码<input type="password" id="pwd" />
			<input type="submit" />
		</form>
		<script type="text/javascript">
			
			//获取ajax对象的方法
			function getXhr(){
				var xhr = null;
				if(window.XMLHttpRequest){//针对其他浏览器
					xhr = new XMLHttpRequest();
				}else{//针对低版本的ie浏览器
					xhr = new ActiveXObject('Microsoft.XMLHTTP');
				}
				return xhr;
			}
			
			<!--获取焦点-->
			//获取焦点事件
			document.getElementById("name").onfocus = function(){
				document.getElementById("span").innerHTML="<font color ='green'>输入用户名</font>"
			}
			//失去焦点事件
			document.getElementById("name").onblur = function(){
				//判断是否输入用户名
				var username = document.getElementById("name").value;
				if (username!='') {//输入的用户名不为空
					document.getElementById("span").innerHTML=""
					//发送异步请求
					//1.先获取ajax对象
					var xhr = getXhr()
					//2.创建请求-->没有发送到后台
					xhr.open('post',"/checkName");
					//3.判断状态，请求成功，并且响应成功，处理
					xhr.onreadystatechange=function(){
						// 判断发送请求成功，并且响应成功
						if(xhr.readyState == 4 && xhr.status == 200){
							//接收响应数据
							var msg = xhr.responseText;
							//判断
							if(msg.indexOf("ok")!=-1){
								//同户名可以用
								document.getElementById("span").innerHTML="<font color ='green'>用户名可以使用</font>"
							}else if(msg.indexOf("error")!=-1){
								//不可用
								document.getElementById("span").innerHTML="<font color='red'>用户名重复！！</font>";
							}
						}
					}	
				xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
				//4.发送请求
				xhr.send("username="+username);
				} else{
					document.getElementById("span").innerHTML="<font color ='red'>用戶名不能为空！！</font>"
				}
			}
		</script>
	</body>
</html>

//后台模拟代码
@Controller
public class UserController {
	@RequestMapping("/checkName")
	@ResponseBody
	public String checkName(String username) {
		System.out.println(username);
		if (username.equals("王大宝")) {
			//重复返回错误
			return "error";
		} else {
			return "ok";
		}
	}
}

当我们在表单中输入了一个用户名：王大宝【用户名重复了】
在这里插入图片描述当我们输入非重复的用户名【提示可以使用】

在这里插入图片描述

通过Jquery来提交异步请求

相对简单一些这种方式基于JQuery实现，需要导入jquery的插件

//前台代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="/static/system/js/jquery-3.3.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="/static/system/js/jquery-form.js"></script>
</head>
<body>
	<form action="" id="saveform">
		用户名<input type="text" name="username" id="username" /> <span id="span"></span>
		<br/> 密 码2<input type="password" name="password id=" password"  /> <input
			type="button" in="btn" />
	</form>
	<script type="text/javascript">
		$(function() {
			$("#username").focus(function() {
				$("#span").html("<font color ='green'>请输入用户名</font>")
			})
			//绑定事件
			$("#username") .blur(function() {
				//发送异步请求
				$ .ajax({
				type : 'post',
				url : '/user/checkName',
				//发送表单数据到后台
				data : $("#saveform").serialize(),
				success : function(msg) {
					 if (msg.indexOf("ok") != -1) {
							$("#span") .html("<font color ='green'>用户名可以使用</font>")
						} else {
							$("#span") .html("<font color ='red'>用户名重复</font>")
						}

					}
				})
			})
		})
	</script>
</body>
</html>

//后台代码
@Controller
@RequestMapping("/user")
public class UserController {
	@RequestMapping("/checkName")
	@ResponseBody
	public String checkName(String username) {
		//随便设置一个重复的用户名
		if ("王大宝".equals(username)) {
			//重复返回错误
			return "error";
		} else {
			return "ok";
		}
	}
}

笑烂脸

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
关于前后台数据的提交方式

关于前后端的数据传输方式1.前台页面的数据传送到后台的方式1.1form表单提交在前端页面中设置form表单，确定需要传递的参数name让用户输入，通过点击按钮后submit()提交到后台。//前台代码<form action="/abc/123" method = "get"> name:<input type="text" name="name"> <br> password:<input type="password" name="pwd"
复制链接

扫一扫