必威体育Betway必威体育官网
当前位置：首页 > IT技术

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

时间:2019-07-27 10:40:00来源:IT技术作者:seo实验室小编阅读:58次「手机版」
　

增删改查

主页：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" value="" id="pno_query"/>
		<input type="button" value="查询" id="btn_2" value="" id="pno_del"/>
		<input type="button" value="删除" id="btn_3" 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" : 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

相关阅读

Keep产品分析，“智能训练计划”能否实现自律健身？

近期，Keep推出了会员付费服务“智能训练计划”。很多人会问这个计划真的够智能吗？能带给用户差异化体验吗？能够激发用户自律健身的内

干货 | 你的产品团队如何实现信息共享？

互联网产品相对于传统软件产品，最大的区别是需要快速迭代。团队信息共享是帮助产品快速迭代的一大法宝：可以减少团队沟通成本、增强

【原创】实现类似街旁网的分享足迹功能

[color=red]转载请注明出处[/color] 在sina微博上看到街旁网的客户端有一个分享足迹的功能，它可以显示我当前的位置，将微博头像标

小乔流水人家 微信web协议分析和实现微信机器人（微信网

参考:https://www.jianshu.com/p/43f54e4b3dc1  http://www.07net01.com/2016/01/1201188.html  http://www.cnblogs.com/xiao

典型相关分析（Matlab实现函数）

先附上自己认为写的比较好的一篇博客。 https://www.cnblogs.com/duye/p/9384821.html 同时要指出自己博文的问题：对于Matlab中can

赞()
分享到:

猜你喜欢

栏目导航

推荐阅读

热门阅读

seo实验室提供seo优化服务，有网站优化、网站建设、运营推广等需求请联系我们!
Copyright © 2001-2017 .seo实验室 版权所有 网站地图