eclipse之MySQL数据库与Web前段存储交互

最新推荐文章于 2024-03-29 21:53:19 发布
最新推荐文章于 2024-03-29 21:53:19 发布
阅读量336 收藏 4
点赞数 5
文章标签： 数据库 mysql
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuyuehuan/article/details/137157088
版权

首先我们新建一个HTML文件和一个Servlet文件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script  src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">  </script> 
</head>
<!-- onload刷新页面就会触发该方法 -->
<body onload="get()">
	<div id = "hhh"></div>
</body>
<script>
function get(){
	$.ajax({
		type:"get",
		url:"/BigData02/ShowServlet",
		success:function(data){
			console.log(data);
			showData(data.data)
		}
	})
}
function showData(data){
	var html = '<table border="1">';
	for(var i = 0; i < data.length; i++){
		html += '<tr>';
		html += '<td>' + data[i].name + '</td>';
		html += '<td>' + data[i].like + '</td>';
		html += '<td>' + data[i].sex + '</td>';
		html += '<td>' + data[i].age + '</td>';
		html += '<td>';
		html += '<input type="button" value="编辑" />';
		html += '<input type="button" value="删除" />';
		html += '</td>';
		html += '</tr>';
	}
	html += '</table>';
	$("#hhh").empty().append(html);
}
</script>
</html>

然后再HTML文件里写入

 

 

 

包含了一个使用jQuery进行AJAX请求并展示数据的功能。页面加载完成后会调用 get() 方法，该方法通过AJAX请求从服务器获取数据，并在成功后调用 showData() 方法展示数据。
 

在展示数据的部分，会将获取到的数据以表格的形式展示在页面上，每一行代表一个人的信息，包括姓名、爱好、性别和年龄，并且每行最后有一个"编辑"和"删除"按钮。
 

 

在Servlet文件里更改此处
 

 

此段内容最好在json里写（JSON网址：JSON在线 | JSON解析格式化—SO JSON在线工具）
 

 

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setCharacterEncoding("utf-8");
		response.setContentType("application/json; charset=utf-8");
		
		String data = "{\r\n" + 
				"  	\"data\":[\r\n" + 
				"	  {\"name\":\"admin\",\"sex\":\"男\",\"age\":\"18\",\"like\":\"sing\"},\r\n" + 
				"	  {\"name\":\"zhang\",\"sex\":\"男\",\"age\":\"18\",\"like\":\"sing\"},\r\n" + 
				"	  {\"name\":\"lisi\",\"sex\":\"女\",\"age\":\"18\",\"like\":\"sing\"},\r\n" + 
				"	  {\"name\":\"zhao\",\"sex\":\"男\",\"age\":\"18\",\"like\":\"sing\"},\r\n" + 
				"	  {\"name\":\"wang\",\"sex\":\"女\",\"age\":\"18\",\"like\":\"sing\"},\r\n" + 
				"	  {\"name\":\"haha\",\"sex\":\"男\",\"age\":\"18\",\"like\":\"sing\"}\r\n" + 
				"	]\r\n" + 
				"}";
		response.getWriter().append(data);
	}
 

 

 

用于处理 GET 请求。在 doGet 方法中，首先设置了响应的字符编码为 UTF-8，并且指定了响应内容类型为 JSON 格式。
 

接着，构建了一个包含JSON格式数据的字符串 data，其中包含了一个键值对，键为 "data"，对应的值是一个包含多个人信息对象的数组。
 

最后，通过 response.getWriter().append(data) 将构建好的 JSON 数据写入响应中，返回给客户端。
 

当客户端发起 GET 请求时，该 Servlet 将返回这段 JSON 数据，客户端可以通过解析这个 JSON 数据来获取人员信息并进行处理。
 

 

注意：
 

此处要与servlet文件命名一致！
 

 

 

最终结果为
 


                

        

        

    

  


    

      

        

            

              
                
                  liuyuehuan
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
数据库前台界面设计html,简单Web界面开发（数据库）

				
			

			

				

					weixin_33379371的博客
				

				

					06-05
					
					5484
					
				

			

		

		

			
				
(1)首先配置好eclipse 和 SQL server 2016的环境，下载sqljdbc4.jar。(我的eclipse是eclipse Neon )(2)创建新的数据库(3)创建java project ，测试是否可以成功连接数据库package pkg;import java.sql.*;public class Main {public static void main(String ...

			
		

	



                

            
              



	

		

			

				
					
前后端的简单交互

				
			

			

				

					qq_45841224的博客
				

				

					01-01
					
					618
					
				

			

		

		

			
				
以运用eclipse为例，简单介绍一下 它的网页项目

创建一个Dynamic Web Project 在他的 WebContent 文件夹里面 新建一个 html文件，可以进行任意命名，新建之后大概是如下界面


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

			
		

	



              


  
              

                


	

		

			

				
					
Eclipse上开发简单Web项目

				
			

			

				

					carson0408的博客
				

				

					01-02
					
					1万+
					
				

			

		

		

			
				
本文是在Eclipse已经完成tomcat部署基础上进行讲述基本操作的，如果对tomcat部署相关知识有任何疑问的，可看我之前发表的有关tomcat部署相关的博文。
1.新建一个动态web项目


如图所示，直接在eclipse的project explorer空白处右键单击，选择new 然后点project web project,然后按在下图输入项目名字点finish即可。

			
		

	





	

		

			

				
					
从零开始教你使用eclipse实现前后端交互

				
			

			

				

					萌萌白白的博客
				

				

					02-17
					
					2714
					
				

			

		

		

			
				
从零开始手把手教你如何使用eclipse实现前后端简单交互

			
		

	



		

			
		



	

		

			

				
					
简单的连接数据库的Web登录界面

					
热门推荐

				
			

			

				

					崔昕阳的博客
				

				

					03-30
					
					5万+
					
				

			

		

		

			
				
简单的连接数据库的Web登录界面



一、需求分析

实现在登录界面输入用户名和密码，连接数据库，与数据库信息进行比对，若用户名和密码相互匹配，则显示登陆成功，若不正确，选择重新输入。



二、工具

1.MySql 2.Tomcat 3.Java EE 4.SQLyog或Navicat等，并配置好环境变量。



三、实现步骤



1.数据库建表

首先，创建数据库，并在数据库中创建数据表...

			
		

	





	

		

			

				
					
简单编写基于SSM框架的数据库CRUDweb页面

				
			

			

				

					Ayoungolder的博客
				

				

					02-13
					
					938
					
				

			

		

		

			
				
开发工具
idea，navicate
技术支持
Maven，SSM（spring,springMVC，Mybatis），bootstrap前端框架，Mysql数据库
基础环境搭建

在idea中创建一个Maven项目，使目录结构如下

引入项目依赖的jar包
spring,springmvc

<!-- spring   springMVC-->
        <dependency>
            <groupId>org.springframework&l

			
		

	





	

		

			

				
					
eclipse之MySQL数据库与Web前端存储交互

					
最新发布

				
			

			

				

					liuyuehuan的博客
				

				

					03-29
					
					943
					
				

			

		

		

			
				
在doGet()方法中，首先构建了一个查询语句"select * from user"，然后调用MysqlUtil类的getJsonBySql()方法来执行查询并获取返回的JSON格式数据。在展示数据的部分，会将获取到的数据以表格的形式展示在页面上，每一行代表一个用户的信息，包括用户ID、用户名和密码，并且每行最后有一个"编辑"和"删除"按钮。在doPost()方法中，直接调用了doGet()方法，实现了POST请求的处理逻辑与GET请求相同。方法，该方法通过AJAX请求从服务器获取数据，并在成功后调用。

			
		

	





	

		

			

				
					
电子商城项目（eclipse）+mysql数据库

				
			

			

				

					07-05
				

			

		

		

			
				
总结来说，"电子商城项目（Eclipse）+MySQL数据库"是一个全面的Web开发实战案例，涵盖了从后端开发、数据库设计到前端交互的各个环节。通过这个项目，你不仅可以提升Java Web开发技能，还能了解电商系统的实际运作...

			
		

	





	

		

			

				
					
Eclipse连接Mysql数据库学生信息管理系统

				
			

			

				

					03-19
				

			

		

		

			
				
本项目"**Eclipse连接Mysql数据库学生信息管理系统**"是一个典型的Java后端应用，利用Eclipse进行开发，并通过JDBC（Java Database Connectivity）接口与MySQL数据库进行交互，实现对学生的个人信息进行增删改查等...

			
		

	





	

		

			

				
					
MySQL数据库与Web前台技术结合的大学成绩管理系统

				
			

			

				

					
				

			

		

		

			
				
资源摘要信息:"本文档详细介绍了使用MySQL数据库、Web前端技术，并以Eclipse作为开发环境的大学生成绩管理系统。系统通过集成老师管理、学生管理、班级管理、课程管理、学生成绩报表等功能，实现了高效、稳定的教学...

			
		

	





	

		

			

				
					
一个从前端到后台服务器与数据库的完整实现

				
			

			

				

					07-09
				

			

		

		

			
				
包含了，前台jsp页面实现，服务端源代码，所需要的jar包，适合web开发新手。

			
		

	





	

		

			

				
					
web大作业实现前端与数据库的交互

				
			

			

				

					
				

			

		

		

			
				
资源摘要信息:"web大作业--前端，后端，数据库交互"  知识点一：Web基础架构 Web应用通常分为前端、后端和数据库三个主要部分。前端负责展示和用户交互，后端处理业务逻辑和数据处理，而数据库存储和管理数据。在...

			
		

	





	

		

			

				
					
eclipse中的web项目连接MySQL数据库

				
			

			

				

					m0_48553581的博客
				

				

					12-12
					
					1万+
					
				

			

		

		

			
				
JSP连接MySQL数据库实现将内容打印在页面上以及登录显示登录者的信息

			
		

	





	

		

			

				
					
【前端素材】推荐5种优质大数据分析展示页面网站设计（25）（附源码）

				
			

			

				

					m0_46013789的博客
				

				

					03-27
					
					982
					
				

			

		

		

			
				
大数据展示页面通过数据可视化、交互性、多维数据分析等功能，帮助用户更好地理解大数据，发现数据中的规律和价值，从而支持决策制定、问题解决和业务优化。这种页面是现代数据驱动决策和分析的重要工具，为用户提供了强大且直观的数据分析平台。

			
		

	





	

		

			

				
					
使用Eclipse创建JavaWeb动态网页项目（二）连接数据库

				
			

			

				

					weixin_44644621的博客
				

				

					02-18
					
					3801
					
				

			

		

		

			
				
上一篇文章介绍了如何使用Servlet建立网页的动态反应，这篇文章介绍数据库的连接方法。
网上大多数文章以MySQL为例，这里介绍Oracle在JavaWeb中的连接方法。
文章目录配置Oracle连接用到的jar包使用html文件实现表单重写Servlet的doPost()方法建立java类实现数据库连接方法写一个登陆成功的html文件
整个项目的文件结构如下：

配置Oracle连接用到的jar包
将ojdbc6.jar放到WEB-INF中的lib下，然后配置项目BuildPath，Add Extern

			
		

	





	

		

			

				
					
【前端素材】推荐5种优质大数据分析展示页面网站设计（26）（附源码）

				
			

			

				

					m0_46013789的博客
				

				

					03-27
					
					761
					
				

			

		

		

			
				
大数据展示页面通过数据可视化、交互性、多维数据分析等功能，帮助用户更好地理解大数据，发现数据中的规律和价值，从而支持决策制定、问题解决和业务优化。这种页面是现代数据驱动决策和分析的重要工具，为用户提供了强大且直观的数据分析平台。

			
		

	





	

		

			

				
					
如何将web前端连接数据库

				
			

			

				

					酸奶公园
				

				

					03-12
					
					1万+
					
				

			

		

		

			
				
在服务器端使用一种数据库访问API（例如MySQL API, MongoDB驱动程序）来访问数据库，并编写服务器端代码来响应请求。在编写代码之前，请确保您已经充分了解您使用的技术和数据库，以及在服务器端和客户端之间如何传输数据。创建一个web前端页面，向服务器端发出请求，在响应中返回由服务器端从数据库中检索的数据。在测试和部署您的代码之前，请确保您已经进行了充分的测试，以确保您的代码完全符合您的需求。在编写代码时，请遵循最佳实践和代码规范，以使您的代码易于阅读和维护。如何将web前端连接数据库。

			
		

	





	

		

			

				
					
网页连接数据库，一个简单的登入界面以及实现登入功能

				
			

			

				

					weixin_42534390的博客
				

				

					01-22
					
					4万+
					
				

			

		

		

			
				
基于V#的ASP.NET.MVC 4 web 网站程序开发
接着上篇继续，上篇地址为https://blog.csdn.net/weixin_42534390/article/details/86576537
我们首先要有一个认知，就是ASP.NET.MVC 4 web 网站程序开发的三层架构概念，分别为BLL,DAL,MOD 这三层的概念，这是竖着的三层。横三层为view，Controllers...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值