javaWeb前后台数据交互

一. 前端发送数据向后台接受数据方式：

方式1.：通过form表单的name属性提交方式

前端发送数据代码

<form action="ShopServlet">
	    <input type="text" name="userName" >
	    <input type="submit">
</form>

后端接受数据代码

  String userName= req.getParameter("userName");

方式二：通过a标签的href属性提交方式

前端发送数据代码

<a href="ShopServlet">提交</a>

后端接受数据代码

  String userName= req.getParameter("userName");

二.后台向前端发送数据的方式

通过四大作用域：

从数据库查询到的后台数据存在四个池子里面

pageContext.req.setAttribute("shops",shop1);(使用少)
req.setAttribute("shops",shop1);(使用最多)
session.setAttribute("shops",shop1);(使用较多)
apllication.setAttribute("shops",shop1);(使用少)

前端通过EL表达式获取后台的数据

  <c:forEach var="shops" items="${shops}">
	${shops}
   </c:forEach>

三.前后台数据交互的方式（前端发送数据和接受数据与后台发送数据和接收数据）

方式一：前后台Jqure中的ajax交互的方式

前端代码

$("#userName").on("blur",function(){
		// $.ajax 表示jquery中的ajax的调用方式
		$.ajax({
				 "url":"HelloServlet",  // 请求地址
				 "data":"userName="+$("input").val(),  //参数
				 "type":"POST",  // 请求类型

//前端接受后台穿啦的数据
				 "success":function(data){    // 请求成功时的回调函数
					 if(data == 1){
						 $("#msg").text("恭喜你，可以使用此用户名");
					 }else{
						 $("#msg").text("对不起，此用户名已被使用");
					 }
					
				 },
				 "error":function(){  // 请求失败时的回调函数
					
				 } 
			});
        );

后端接受数据代码

// 获取用户提交的请求参数
	String name = request.getParameter("userName");
	PrintWriter pw = response.getWriter();
	if("seven".equals(name)){
		pw.write("{\"result\":false}");
	}else{
		pw.write("{\"result\":true}");
	}

方式一：js的提交方式

前端代码

<input id="userName"  onblur="check()" />
<h1 id="msg"></h1>

// 创建异步请求对象
	var xmlhttp = new XMLHttpRequest();
	// 设置请求类型、请求地址以及参数、是否异步
	xmlhttp.open("post","HelloServlet",true);
	// 设置请求头部信息
	xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
	// 发送请求

	var input = document.getElementById("userName");
	xmlhttp.send("userName="+$("input").input.value);
	// 状态监听
	xmlhttp.onreadystatechange = function(){
		// 当状态为4 响应码为200的时则表示请求完成
		if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
			// 获取返回请求结果
			 var result = xmlhttp.responseText;
			 // 根据请求结果进行处理
			 if(result == 1){
			  	$("#msg").text("恭喜你，可以使用此用户名");					 
			 }else{
			 	$("#msg").text("对不起，此用户名已被使用");					 
			 }
		}
	};

后台代码

// 获取用户提交的请求参数
	String name = request.getParameter("userName");
    PrintWriter pw = response.getWriter();
    // 当用户名是seven返回字符串0，否则返回字符串1
    if("seven".equals(name)){
        pw.write("0");
    }else{
        pw.write("1");
    }

方式三：json的提交方式和数据

前端代码

/*
			使用 HTTP GET 请求从服务器加载 JSON 编码的数据
			第1个参数为请求地址，第2个参数为请求参数，请3个参数为成功时的回到函数
		*/
		$.getJSON("HelloServlet",{userName:$("input").val()},function(data){
            // 如果返回的json字符串定义了result的键，可以直接通过键取出值进行判断操作
				if(data.result){
					 $("#msg").text("恭喜你，可以使用此用户名");
				 }else{ 
					 $("#msg").text("对不起，此用户名已被使用");
				 }
		});

后端代码

// 获取用户提交的请求参数
	String name = request.getParameter("userName");
// 后台向前台传参数
	PrintWriter pw = response.getWriter();
	if("seven".equals(name)){
		pw.write("{\"result\":false}");
	}else{
		pw.write("{\"result\":true}");
	}