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

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

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请求

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

注意事项:

  1. 提交可以是按钮提交,但是必须设置属性为submit
  2. get : 没有中文乱码:tomcat 8.0 get中文乱码问题已经处理好了
  3. 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="输入用户名"
			}
			//失去焦点事件
			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="用户名可以使用"
							}else if(msg.indexOf("error")!=-1){
     
								//不可用
								document.getElementById("span").innerHTML="用户名重复!!";
							}
						}
					}	
				xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
				//4.发送请求
				xhr.send("username="+username);
				} else{
     
					document.getElementById("span").innerHTML="用戶名不能为空!!"
				}
			}
		</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";
		}
	}
}

当我们在表单中输入了一个用户名:王大宝【用户名重复了】
关于前后台数据的提交方式_第2张图片当我们输入非重复的用户名【提示可以使用】

关于前后台数据的提交方式_第3张图片

通过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("请输入用户名")
			})
			//绑定事件
			$("#username") .blur(function() {
     
				//发送异步请求
				$ .ajax({
     
				type : 'post',
				url : '/user/checkName',
				//发送表单数据到后台
				data : $("#saveform").serialize(),
				success : function(msg) {
     
					 if (msg.indexOf("ok") != -1) {
     
							$("#span") .html("用户名可以使用")
						} else {
     
							$("#span") .html("用户名重复")
						}

					}
				})
			})
		})
	</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";
		}
	}
}

你可能感兴趣的:(WEB,ajax)