Java前后端交互

前端与后端交互：使用Ajax插入数据库与显示数据

最新推荐文章于 2025-10-09 09:16:30 发布

原创最新推荐文章于 2025-10-09 09:16:30 发布 · 6.2k 阅读

40 ·

CC 4.0 BY-SA版权

文章标签：

#p2p #网络协议 #网络

本文介绍了如何使用Ajax技术在前端页面通过HTML表单向后端Servlet传递数据，实现学生信息的插入，并展示从数据库获取的列表。涉及Servlet接收参数并执行SQL插入，以及前端动态更新表格的功能。

1.连接数据库：需要导入两个文件

2.Servlet端

html端:给Servlet传数据 ajax

将数据填充到表格

插入：

格式：

插入代码：html端

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
 <style> 
        .white_content { 
            display: none;      
            position: absolute; /* 默认隐藏*/
            top: 25%; 
            left: 25%; 
            width: 25%; 
            height: 25%; 
            padding: 20px; 
            border: 10px solid orange; 
            background-color: white; 
            z-index:1002; 
            overflow: auto; 
        } 
     </style> 
</head>

<body onload="get()">
	<input type="button"  value="插入" onclick="openDialog()" />           
		<div id="light" class="white_content">
		姓名：<input type="text" id="I_name"/> <br/>
		手机：<input type="text"   id="I_phone"/> <br/>
		性别：<input type="text"   id="I_sex"/> <br/>	


	     <input type="button" value="提交"  onclick = "closeDialog()"/>
		</div>
<div id="inf">
</div>
</body>
<script>
function get(){
	$.ajax({
		type:"get",
		url:"http://localhost:12345/BaiWork/WorkServlet",
		data:{},
		success:function(data){
			console.log(data);
			viewList(data.data);
		}
		
		
	}) 
	
}
function viewList(data){
	var html ='<table style="border:1px solid #000;width:400px;height20px">';
	for(var i=0;i<data.length;i++){
		html +='<tr>';
		html += '<td  style="border:1px solid #000;width:10%;height:20px">' +data[i].id+ '</td>';
		html += '<td  style="border:1px solid #000;width:10%;height:20px">' +data[i].name+ '</td>';
		html += '<td  style="border:1px solid #000;width:10%;height:20px">' +data[i].phone+ '</td>';
		html += '<td  style="border:1px solid #000;width:10%;height:20px">' +data[i].sex+ '</td>';
		html += '<td  style="border:1px solid #000; width:40px;height:20px;">' ; 
		html += '<input style="width:40px;height:20px;" id="td_type" type="button" value="修改"   onclick="updateDiv('+data[i].id+')"/>';
		html += '<input style="width:40px;height:20px;" id="td_type"type="button" value="删除"   onclick="del('+data[i].id+')"/>';
		html += '</td>'
		html+='</tr>';
		
	}
	html +='</table>';
	
	$("#inf").empty().append(html);	
}
function openDialog(){
    document.getElementById('light').style.display='block';
}
function closeDialog(){
    document.getElementById('light').style.display='none';
  	
    var name = $("#I_name").val();
    var phone = $("#I_phone").val();
    var sex = $("#I_sex").val();
    $.ajax({
		type:"get",  // doGet方法当中  post:doPost
		url:"http://localhost:12345/BaiWork/InsertServlet",
		data:{"name":name,"phone":phone,"sex":sex},  //所要提叫的数据
		success:function(data){  //数据从后面的servlet往前台传
			console.log(data);
			
		}
	});
    
}

Servlet端：

		response.setContentType("text/json;charset=utf-8");
		response.setCharacterEncoding("utf-8");	
		String name = request.getParameter("name");
		String phone = request.getParameter("phone");
		String sex = request.getParameter("sex");
		System.out.println(name + " " + phone + " " + sex);
		String sql = "insert into student(name,phone,sex) values ('"+name+"','"+phone+"','"+sex+"')";
		int count = MysqlUtil.add(sql);
		String json = "";
		if (count == 1) {
			json="{\"code\":\"200\",\"message\":\"成功\"}";
		}else {
			json="{\"code\":\"200\",\"message\":\"失败\"}";
		}
		response.getWriter().append(json);
	}

总Servlet获取数据库


		String sql = "select * from student"; //获取数据从哪个表
		String[] colums = {"id","name","phone","sex"};//要获取什么数据
		String json =MysqlUtil.getJsonBySql(sql, colums);//操作
		response.setContentType("text/json;charset=utf-8"); //字符集
		response.setCharacterEncoding("utf-8");

		response.getWriter().append(json);

（数据库 int 不加单引号）