JavaWeb前后端交互。

最新推荐文章于 2024-05-06 18:26:10 发布

回某某

最新推荐文章于 2024-05-06 18:26:10 发布

阅读量1k

点赞数 1

文章标签： java

本文链接：https://blog.csdn.net/huimoumou/article/details/99648120

版权

前端代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	账号<input type='text' id="account"><br/>
	密码<input type='text' id="password"><br/>
	<button onclick='send()'>提交</button>
	<div id="msg"></div>
	<div id="show"></div>
</body>
　<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">

function send(){
	var account=document.getElementById("account").value;
	var password=document.getElementById("password").value;
	var data = {"username":account,"password":password};  //
	 $.ajax({
			    url:"http://localhost/servlet/UserServler",    //请求的url地址
			    dataType:"json",   //返回格式为json
			    async:true,//请求是否异步，默认为异步，这也是ajax重要特性
			    data:data,    //参数值
		    		type:"post",   //请求方式
			    success:function(req){
						
					if(req.code=="200")
						{
							showData(req.data);
						}
					else{
						$("#show").empty();
					}
					$("#msg").html(req.msg);
					alert(req.msg);
			    },
			    error:function(a,b,c){
			        //请求出错处理					
					alert(a);
					alert(b);
					alert(c);
			    }
			});
}
var showData=function(d){
	var a = "<table><tr><th>id</th><th>名字</th><th>年龄</th></tr>";
	for(var i=0;i<d.length;i++)
		{
			a+="<tr><td>"+(i+1)+"</td><td>"+d[i].name+"</td><td>"+d[i].desc+"</td></tr>";
		}
	a+="</table>";
	$("#show").html(a);	
}
</script>
</html>

后端代码

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		response.setCharacterEncoding("UTF-8");
		response.setContentType("text/html; charset=utf-8");		
		String user=request.getParameter("username");
		String pwd=request.getParameter("password");	
		boolean login=false;
		//-----------------------↓检测是否能匹配成功---------------
		String sqlLogin="select * from hmz_gly where userName='"+user+"' and pwd = '"+pwd+"'";//select语法。
		System.out.println(sqlLogin);//打印。
		List<Map<String,String>> list= Db.select(sqlLogin, new String [] {"id"});  //传递给Db用于数据库交互。？？？？
		if(list.size()>0) {
			login=true;
		}		
		//-----------------------检测是否能匹配成功---------------
		if(login) {
			String sql="select  * from user";
			List<Map<String, String>> data = Db.select(sql,new String [] {"userName","sex"});
			String json="{\"code\":\"200\",\"msg\":\""+user+"!登录成功\",\"data\":[";
			for (Map<String, String> map : data) {
				json+="{\"name\":\""+map.get("userName")+"\",\"desc\":\""+map.get("sex")+"\"},";
			}
			json=json.substring(0,json.length()-1);
			json+="]}";
			System.out.println(json);
			response.getWriter().append(json);
		}else {
			response.getWriter().write("{\"code\":\"500\",\"msg\":\""+user+"!登录失败\"}");
			System.out.println("登陆失败");
		}				
	}```
**Db代码**（用于数据库交互）

public static List<Map<String,String>> select(String sql,String[] args){
List<Map<String,String>> list =new ArrayList<>();

	try {
		//加载mysql驱动
		Class.forName("com.mysql.jdbc.Driver");
		//连接
		String url = "jdbc:mysql://localhost:3306/hmz_ceshi";
		//数据库账户
		String user = "root";
		//数据库密码
		String password = "root";
		//创建连接
		Connection conn = DriverManager.getConnection(url, user, password);
		//创建一个"小手"
		Statement statement = conn.createStatement();
		// 一个sql
       	//String sql="select * from user";
		//通过我们这个小手执行我们的sql拿回数据
		ResultSet resultSet = statement.executeQuery(sql);
		//遍历结果集
		while(resultSet.next()) {
			Map<String,String> result=new HashMap<>();
			for(String str:args) {
				result.put(str, resultSet.getString(str));
			}
			list.add(result);
		}
	} catch (SQLException e) {
		e.printStackTrace();
	} catch (ClassNotFoundException e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	}
	return list;
}

``
下面先梳理一下JavaWeb前后端数据具体是怎么传递的
前端页面

document.getElementById("…").value.获取到输入的内容。
定义一个data{key,value}.存放获取到的内容。
通过ajax中的url进入访问后端。

后端页面

request.getParameter("…");获取1.中的输入内容
通过List<Map<String,String>> list= Db.select(sqlLogin, new String [] {"id"}); 来进行后端与数据库的交互。其中new String[]{“id”}是获取到数据列名为id的内容。 list是一个变量，为List类型。在这之后我们进行了一个判断，如果list里有内容。则认为我们输入的密码是正确的。
if(login) {…}里的相关操作可大致分为：
（1）用进入Db与数据库交互，获取数据库的相关内容，并记录在data中。
（2）设置字符串 json。通过for循环遍历data所的内容，并存放在json中。
（3）打印相关内容，返回前端页面。

Db数据库交互
设置了一个select方法来进行数据库与Java进行交互。具体方法见代码注释。
将数据库中的相关数据存放到resultSet中
在获取到数据库的内容之后进行while循环。将resultSet中的数据遍历到result中，然后打包返回后端页面。

回某某

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
JavaWeb前后端交互。

前端代码<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body> 账号<input type='text' id="account"><...
复制链接

扫一扫