使用AJAX实现数据的增删改查

最新推荐文章于 2024-07-21 18:42:33 发布
最新推荐文章于 2024-07-21 18:42:33 发布
阅读量2.9w 收藏 163
点赞数 25
分类专栏： JDBC工具类 文章标签： AJAX 增删改查
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36186690/article/details/81230722
版权

主页：index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
	</head>
	<body>
		编号：<input type="text" value="" id="pno"/><br>
		姓名：<input type="text" value="" id="name"/><br>
		性别：男：<input type="radio" name="sex" value="男">女：<input type="radio" name="sex" value="女"><br>
		年龄：<select id="age">
			<option value="15">15</option>
			<option value="16">16</option>
			<option value="17">17</option>
			<option value="18">18</option>
			<option value="19">19</option>
			<option value="20">20</option>
			<option value="21">21</option>
			<option value="22">22</option>
			<option value="23">23</option>
			<option value="24">24</option>
			<option value="25">25</option>
		</select><br>
		身高：<input type="text" value="" id="height"/><br>
		体重：<input type="text" value="" id="weight"/><br>
		<input type="button" value="插入" id="btn_1" onclick="submit()"/>
		<br>
		<br>
		<br>
		
		编号：<input type="text" value="" id="pno_query"/>
		<input type="button" value="查询" id="btn_2" onclick="query()"/>
		<table id="queryResult">
			<tr>
				<td>编号</td>
				<td>姓名</td>
				<td>性别</td>
				<td>年龄</td>
				<td>身高</td>
				<td>体重</td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
		
		
		<br>
		<br>
		<br>
		编号：<input type="text" value="" id="pno_del"/>
		<input type="button" value="删除" id="btn_3" onclick="del()"/>
		
		<br>
		<br>
		<br>
		编号：<input type="text" value="" id="pno_up"/><br>
		姓名：<input type="text" value="" id="name_up"/><br>
		性别：男：<input type="radio" name="sex_up" value="男">女：<input type="radio" name="sex_up" value="女"><br>
		年龄：<select id="age_up">
			<option value="15">15</option>
			<option value="16">16</option>
			<option value="17">17</option>
			<option value="18">18</option>
			<option value="19">19</option>
			<option value="20">20</option>
			<option value="21">21</option>
			<option value="22">22</option>
			<option value="23">23</option>
			<option value="24">24</option>
			<option value="25">25</option>
		</select><br>
		身高：<input type="text" value="" id="height_up"/><br>
		体重：<input type="text" value="" id="weight_up"/><br>
		<input type="button" value="更新" id="btn_4" onclick="update()"/>
		
	</body>
	
	<script type="text/javascript">
	/*
		var x = $("#queryResult").html();
		
		for(var i=0; i < 20 ; i++) {
			x += '<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>';
		}
		$("#queryResult").html(x);*/
	function submit() {
		var pno = $("#pno").val();
		var name = $("#name").val();
		var sex = $('input[name="sex"]:checked').val();
		var age = $("#age").val();
		var height = $("#height").val();
		var weight = $("#weight").val();
	
		var data={
				
			"pno":pno,
			"name":name,
			"sex":sex,
			"age":age,
			"height":height,
			"weight" : weight
		}
		
		
		$.ajax({
			type : "post",
			url : "Hello",
			data : data,
			cache : true,
			async : true,
			success: function (data ,textStatus, jqXHR){
	        	if(data.code == 200){
	        		alert("插入成功了");
	        	}else{
	        		alert(data.message);
	        	}
		    },
	        error:function (XMLHttpRequest, textStatus, errorThrown) {      
	           
	            alert(typeof(errorThrown));
	        }
			
		});
	}
	
	
	function query() {
		
		var pno = $("#pno_query").val();	
		var str = ["编号","姓名","性别","年龄","身高","体重"];
		$.ajax({
			type : "post",
			url : "HelloQuery",
			data : {
				"pno": pno
			},
			cache : true,
			async : true,
			success: function (data ,textStatus, jqXHR){
				//data = $.parseJSON(data);
				var j = 0;
				var x = 1;
				//for(var i=1; i <20; i++) {
					for(var p in data){//遍历json对象的每个key/value对,p为key
						console.log(data[p]);
						if(j == 6) {
							j = 0;
							x++;
						}
						 $("#queryResult tr:eq("+x+") td:eq("+j+")").html(data[p]);
						  console.log(data[p]);
						 j++;
					}
				//}
				
				
				
	        	
		    },
	        error:function (XMLHttpRequest, textStatus, errorThrown) {      
	           
	            alert(typeof(errorThrown));
	        }
			
		});
	}
	
	function del() {
		var pno = $("#pno_del").val();	
		
		$.ajax({
			type : "post",
			url : "HelloDelete",
			data : {
				"pno": pno
			},
			cache : true,
			async : true,
			success: function (data ,textStatus, jqXHR){
				if(data.code == 200){
	        		alert("删除成功了");
	        	}else{
	        		alert(data.message);
	        	}
		    },
	        error:function (XMLHttpRequest, textStatus, errorThrown) {      
	           
	            alert(typeof(errorThrown));
	        }
			
		});
	}
	
	function update() {
		var pno = $("#pno_up").val();
		var name = $("#name_up").val();
		var sex = $('input[name="sex_up"]:checked').val();
		var age = $("#age_up").val();
		var height = $("#height_up").val();
		var weight = $("#weight_up").val();
	
		var data={
				
			"pno":pno,
			"name":name,
			"sex":sex,
			"age":age,
			"height":height,
			"weight" : weight
		}
		
		
		$.ajax({
			type : "post",
			url : "HelloUpdate",
			data : data,
			cache : true,
			async : true,
			success: function (data ,textStatus, jqXHR){
	        	if(data.code == 200){
	        		alert("更新成功了");
	        	}else{
	        		alert(data.message);
	        	}
		    },
	        error:function (XMLHttpRequest, textStatus, errorThrown) {      
	           
	            alert(typeof(errorThrown));
	        }
			
		});
	}
		
		
		
	</script>
</html>

增加的Serlvet：Hello.java

package com.web;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.mysql.MysqlUtil;

/**
 * Servlet implementation class Hello
 */
@WebServlet("/Hello")
public class Hello extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public Hello() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.getWriter().append("Served at: ").append(request.getContextPath());
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {		
		response.setCharacterEncoding("utf-8");
		response.setContentType("application/json; charset=utf-8");
		
		String pno = request.getParameter("pno");
		String name = request.getParameter("name");
		String sex = request.getParameter("sex");
		String age = request.getParameter("age");
		String height = request.getParameter("height");
		String weight = request.getParameter("weight");
		
		String sqlInsert = "INSERT  INTO Person (Pno,Pname,Psex,Page,Pheight,Pweight) VALUES('";
		sqlInsert += pno +"','";
		sqlInsert += name +"','";
		sqlInsert += sex +"',";
		sqlInsert += age +",";
		sqlInsert += height +",";
		sqlInsert += weight +")";
		
		int message = MysqlUtil.add(sqlInsert);
		String rep = "";
		if(message == 1) {
			rep = "{\"code\":200,\"message\":\"成功插入数据库\"}";
		}else {
			rep = "{\"code\":\"999\",\"message\":\"插入失败了\"}";
		}
		response.getWriter().write(rep);
		
		
	}

}

删除的Servlet：HelloDelete.java

package com.web;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.mysql.MysqlUtil;

/**
 * Servlet implementation class HelloDelete
 */
@WebServlet("/HelloDelete")
public class HelloDelete extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public HelloDelete() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.getWriter().append("Served at: ").append(request.getContextPath());
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setCharacterEncoding("utf-8");
		response.setContentType("application/json; charset=utf-8");
		
		String pno = request.getParameter("pno");
		
		
		String sqlDel = "delete from Person where pno="+pno;
		
		
		int message = MysqlUtil.del(sqlDel);
		String rep = "";
		if(message == 1) {
			rep = "{\"code\":\"200\",\"message\":\"成功删除\"}";
		}else {
			rep = "{\"code\":\"999\",\"message\":\"删除失败\"}";
		}
		response.getWriter().write(rep);
	}

}

更新的Servlet：HelloUpdate.java

package com.web;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.mysql.MysqlUtil;

/**
 * Servlet implementation class HelloUpdate
 */
@WebServlet("/HelloUpdate")
public class HelloUpdate extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public HelloUpdate() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.getWriter().append("Served at: ").append(request.getContextPath());
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setCharacterEncoding("utf-8");
		response.setContentType("application/json; charset=utf-8");
		
		String pno = request.getParameter("pno");
		String name = request.getParameter("name");
		String sex = request.getParameter("sex");
		String age = request.getParameter("age");
		String height = request.getParameter("height");
		String weight = request.getParameter("weight");
		
		String sqlupdate = "update Person set ";
//		sqlupdate += "Pno='"+ pno +"',";
		sqlupdate += "Pname='"+ name +"',";
		sqlupdate += "Psex='"+ sex +"',";
		sqlupdate += "Page="+ age +",";
		sqlupdate += "Pheight="+ height +",";
		sqlupdate += "Pweight="+ weight;
		sqlupdate += " where Pno='"+pno+"'";
		System.out.println(sqlupdate);
		int message = MysqlUtil.update(sqlupdate);
		String rep = "";
		if(message == 1) {
			rep = "{\"code\":\"200\",\"message\":\"成功插入数据库\"}";
		}else {
			rep = "{\"code\":\"999\",\"message\":\"插入失败了\"}";
		}
		response.getWriter().write(rep);
		
	}

}

查询的Servlet：HelloQuery.java

package com.web;

import java.io.IOException;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.mysql.MysqlUtil;

/**
 * Servlet implementation class HelloQuery
 */
@WebServlet("/HelloQuery")
public class HelloQuery extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public HelloQuery() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.getWriter().append("Served at: ").append(request.getContextPath());
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setCharacterEncoding("utf-8");
		response.setContentType("application/json; charset=utf-8");
		String pno = request.getParameter("pno");
		String[] params = {"Pno","Pname","Psex","Page","Pheight","Pweight"};
		String sql = "select * from Person where Pno="+pno;
		String data = "{";
		
		String[] str = {"编号","姓名","性别","年龄","身高","体重"};
		List<Map<String,String>> listmap = new ArrayList<>();
		listmap = MysqlUtil.show(sql, params);
		for(int i =0 ; i<listmap.size();i++) {			
			for(int j=0 ; j<listmap.get(i).size();j++) {
				data += "\""+str[j]+"\":"+"\""+listmap.get(i).get(params[j])+"\",";			
			}
		}
		data = data.substring(0, data.length()-1);
		data += "}";
		
		
		System.out.println(data);
		response.getWriter().write(data);
	}
	
	

}

页面如下：

对应的数据库：

 git克隆地址：https://github.com/dreamiboy/JDBCUtil.git

Fuzz_
关注
  • 25
    点赞
  • 踩
  • 163
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
通过Ajax实现增删改查
weixin_30654583的博客
06-12 195
项目链接:https://github.com/shuai7boy/Ajax_CRUD 简要截图: 转载于:https://www.cnblogs.com/shuai7boy/p/5577591.html
AJAX实现数据的增删改查操作详解【java后台】
10-15
主要介绍了AJAX实现数据的增删改查操作,结合实例形式详细分析了ajax结合java后台实现数据库增删改查相关操作技巧,需要的朋友可以参考下
mysql增删改查
最新发布
Python老吕的博客
07-21 634
MySQL的增删改查操作是数据库管理和开发的基础。通过掌握这些基本操作，你可以有效地管理和查询数据。此外，高级查询和操作如聚合函数、连接查询、子查询、索引、事务处理和备份恢复等也是数据库管理员和开发人员必须掌握的技能。通过不断学习和实践，你可以提高你的MySQL技能水平，并更好地管理和利用你的数据库资源。
ajax最基本修改数据,2018-10-26 ajax初学一 （数据库的增删改查）
weixin_42304230的博客
08-05 665
注：1.数据库的命令可以大写，也可小写，一般为小写的是可修改的内容注：2.命令结束，记得加分号一、数据库的基本结构开启数据库的服务器 ==> 数据库 ==> 数据表 ==> 行 ==> 列二、创建数据库的步骤1.创建一个数据库CREATE DATABASE 数据库名 CHARSET=UTF8 ;2.进入数据库USE 数据库名3.创建数据表CREATE TABLE ...
jquery与ajax实现增删改查
qq_45030966的博客
09-14 6521
jquery与ajax实现增删改查 对于本项目，jquery与ajax实现当前页面的增删改查 jquery获取当前页面的数据，ajax与后台接口进行连接，将后台数据返回到前端，将前端数据送回后台 准备操作： 1.将项目上传到云服务器上，并且通过 java -jar xxx.jar命令行运行当前jar包。运行成功后，打开http://ip:端口号/swagger-ui.html页面查看接口。 2.连接云服务器数据库 新建数据库，xxtx,将sql文件导入进来。导入成功之后，给当前云服务器的数据库创建用户名
手写ajax增删改查 需要自建数据库
04-03
需要自己新建数据库mysql 表 或者自备其他数据库及驱动
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
10-18
描述中进一步明确了本文档的知识点范围，主要介绍如何通过jQuery和datatables插件实现数据的增删改查功能，并且特别强调了与页面表格相关的操作技巧。这些技巧可能包括表格初始化设置、事件监听、数据请求的配置和...
MVC+jQuery.Ajax异步实现增删改查和分页
10-22
在了解MVC结合jQuery.Ajax实现异步增删改查和分页的具体实现之前，我们首先要了解一些核心的概念，包括MVC框架、jQuery.Ajax、以及Web应用中的增删改查（CRUD）和分页。 MVC全称为Model-View-Controller，是一种...
ssm框架整合+jQuery+Bootstrap实现表格数据增删改查
03-01
这个项目结合了jQuery和Bootstrap，旨在为开发者提供一个完整的Web应用解决方案，实现表格数据的增删改查功能。下面将详细阐述这些技术在实际应用中的作用和整合方式。 1. **Spring框架**：Spring是Java企业级应用...
ajax分页增删改查
08-20
在本文中，我们将深入探讨如何使用Ajax、GETJSON方法、Servlet以及JavaWeb技术来实现对MySQL数据库的分页增删改查操作。首先，我们理解一下这些技术的基础知识。 Ajax，全称为Asynchronous JavaScript and XML，是...
Ajax实现增删改查的demo
04-01
Ajax实现增删改查的demo
一个页面实现Ajax效果的增删改查-JQuery+Json版
08-25
一个页面实现Ajax效果的增删改查-JQuery+Json版包含数据库
AJAX的增删改
03-28
NULL 博文链接：https://aazham.iteye.com/blog/1260712
JAVA---用ajax 和数据库连接进行增删改查demo
天才周的博客
07-26 7872
前台： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"&gt;&lt;/script&gt; &lt;title&gt
java ajax增删改查_AJAX实现数据的增删改查操作详解java后台
weixin_28728279的博客
02-13 923
这篇文章主要介绍了AJAX实现数据的增删改查操作,结合实例形式详细分析了ajax结合java后台实现数据库增删改查相关操作技巧,需要的朋友可以参考下本文实例讲述了AJAX实现数据的增删改查操作。分享给大家供大家参考，具体如下：主页：index.html编号：姓名：性别：男：女：年龄：1516171819202122232425身高：体重：编号：编号姓名性别年龄身高体重编号：编号...
第9讲：使用ajax技术实现增删改查及分页显示功能（jQuery）
软件之家的博客
06-23 1323
本讲内容首先讲解jQuery对ajax的支持，分别讲解$.post,$.get,$.ajax等方法，这些方法的参数，使用方法及区别。最后对ajax的综合应用举例：在同一个页面实现新增，修改，删除学校资料，分页列表等功能，前端使用html静态页面，使用MySQL数据库，后台使用servlet技术实现。
jQuery实例--Ajax信息的增删改查等操作
热门推荐
周梦康的代码碎片
01-24 1万+
jQuery实例 $(function(){ //调用加载数据函数 loadstu(); //为添加按钮绑定一个添加动作 $("#aid").click(function(){ $("#fill").show(); $("#myform").show(); }); });
基于ajax的三层，实现数据库增删改查基础（三 UI层）
Heroin的博客
08-03 697
这一层相对前两层复杂一些，因为我们采用的ajax，所以处理需要ashx,html和aspx进行显示页面和数据处理 首先了解下ajax，无刷新页面就可以进行数据请求和处理，比起传统的整个刷新，用户体验会好很多 那么ajax代码如下 不适用jquery编写代码会复杂一些，懒得敲了，直接上图片吧 那么使用了jquery后代码量直线下降代码如下，$.post或者$.get代表发送的请求方式，第一
使用Spring Boot和Ajax实现数据增删改查
04-27
好的，这是一个常见的Web开发需求，我可以给您一些指导。 首先，您需要搭建一个基于Spring Boot的Web项目。可以使用Spring Initializr快速生成一个基础项目，选择Web和JPA作为依赖项。 接下来，您可以创建一个实体类来表示您的数据模型，例如： ```java @Entity public class User { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String name; private String email; // getters and setters } ``` 然后，您需要创建一个Repository接口来处理数据的增删改查操作，例如： ```java @Repository public interface UserRepository extends JpaRepository<User, Long> { } ``` 接下来，您需要创建一个Controller类来处理用户请求，并返回相应的数据。在这个Controller类中，您可以使用@RestController注解来将其声明为RESTful API，例如： ```java @RestController @RequestMapping("/users") public class UserController { @Autowired private UserRepository userRepository; @GetMapping public List<User> getUsers() { return userRepository.findAll(); } @PostMapping public User createUser(@RequestBody User user) { return userRepository.save(user); } @PutMapping("/{id}") public User updateUser(@PathVariable Long id, @RequestBody User user) { user.setId(id); return userRepository.save(user); } @DeleteMapping("/{id}") public void deleteUser(@PathVariable Long id) { userRepository.deleteById(id); } } ``` 最后，您需要编写前端代码来调用这些API接口并显示数据。可以使用Ajax来实现异步请求和响应，例如： ```javascript $(function() { loadUsers(); $('#addUserBtn').click(function() { var name = $('#name').val(); var email = $('#email').val(); var user = { name: name, email: email }; createUser(user); }); function loadUsers() { $.get('/users', function(users) { var html = ''; $.each(users, function(index, user) { html += '<tr>'; html += '<td>' + user.id + '</td>'; html += '<td>' + user.name + '</td>'; html += '<td>' + user.email + '</td>'; html += '<td><button class="btn btn-sm btn-primary editBtn" data-id="' + user.id + '">Edit</button></td>'; html += '<td><button class="btn btn-sm btn-danger deleteBtn" data-id="' + user.id + '">Delete</button></td>'; html += '</tr>'; }); $('#userTable tbody').html(html); }); } function createUser(user) { $.ajax({ url: '/users', type: 'POST', contentType: 'application/json', data: JSON.stringify(user), success: function(user) { $('#name').val(''); $('#email').val(''); loadUsers(); } }); } $(document).on('click', '.editBtn', function() { var id = $(this).data('id'); var name = $(this).closest('tr').find('td:eq(1)').text(); var email = $(this).closest('tr').find('td:eq(2)').text(); $('#id').val(id); $('#name').val(name); $('#email').val(email); }); $(document).on('click', '.deleteBtn', function() { var id = $(this).data('id'); deleteUser(id); }); function deleteUser(id) { $.ajax({ url: '/users/' + id, type: 'DELETE', success: function() { loadUsers(); } }); } }); ``` 这样，您就可以使用Spring Boot和Ajax来实现数据的增删改查了。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值