AJAX实现数据的增删改查操作详解【java后台】_AJAX相关

来源:脚本之家  责任编辑:小易  

www.zgxue.com防采集请勿采集本网。

本文实例讲述了AJAX实现数据的增删改查操作。分享给大家供大家参考,具体如下:

主页: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

更多关于ajax相关内容感兴趣的读者可查看本站专题:《jquery中Ajax用法总结》、《JavaScript中ajax操作技巧总结》、《PHP+ajax技巧与应用小结》及《asp.net ajax技巧总结专题

希望本文所述对大家ajax程序设计有所帮助。

最低0.27元开通文库会员,查看完整内容>原发布者:华松清27.项目平台管理系统:该项目主要用于项目的目标控制,其目的为项目建设的增值服务。项目包含项目管理,任务管理,信息箱,客户信息管理,权限管理,我的信息六大功能模块。系统基于B/S三层架构,采用struts2+Spring?Hibernate?框架.使用Oracle?数据库。本项目只投入7个人,开发周期为2个月。本人主要负责项目管理模块,根据模块需求利用ssh和Javascript、easyUI、ajax等技术完成—基本信息管理,需求分析管理,模块管理,功能管理,附件管理五个子模块。功能描述:1.页面展示五个模块的一些基本信息。2.后台系统管理页面:项目开发ERP管理细化模块的增删改查+分页。3.后台数据库管理:项目开发信息的增删改查+分页4.添加数据页面验证;应用技术:采用Ajax实现页面的无刷新异步通信。应用SSH实现文件上传与下载功能。应用SSH+easyUi对数据库数据进行增删改查+分页+模糊查询。应用easyUi对表单进行验证并阻止表单重复提交。网络版办公自动化管理系统(WebOA):本系统是一个实现企业内各种信息资源共享、加强员工间的交流、提高整体工作效率、为领导各种有用数据、方便领导对公司情况的及时了解、提供决策支持和提供各种工作记录以备事后查询的信息系统。采用Struts2、Spring、Hibernate、HTML、JavaScript、DWR等相关技术。本人在项目中进行了前期的需求分析,系统架构实现,数据库建模,及部分编码工作。网上购物系统:本系统内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • jquery+datatables插件实现ajax加载数据与增删改查功能示例
  • mvc+jquery.ajax异步实现增删改查和分页
  • jquery的ajax接收java返回数据方法
  • ajax提交到java后台之后处理数据的实现
  • ajax java 实现自动完成功能
  • ajax+java用户登陆注册验证的实现代码
  • 详解java ajax jsonp 跨域请求
  • java使用ajax实现跨域上传图片功能
  • javaweb使用cors完成跨域ajax数据交互
  • 深入ajax代理的java servlet的实现详解
  • 在java的struts中判断是否调用ajax及用拦截器对其优化
  • ajax实现文件上传功能(spring mvc)
  • asp.net中mvc使用ajax提交参数的匹配问题解决探讨
  • ajax+struts2实现验证码验证功能实例代码
  • 使用ajax实现无刷新改变页面内容和地址栏url
  • ajax设置async校验用户名是否存在的实现方法
  • jquery ajax 向后台传递数组参数示例
  • 在实战中可能碰到的几种ajax请求方法详解
  • ajax loading gif generator
  • asp小偷程序如何利用xmlhttp实现表单的提交
  • ajax的jsonp方式跨域获取数据的简单实例
  • 求JAVA项目经验
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全javascriptasp.netphp编程ajax相关正则表达式asp编程jsp编程编程10000问css/htmlflex脚本加解密web2.0xml/rss网页编辑器相关技巧安全相关网页播放器其它综合dart首页jquery中ajax用法总结javascript中ajax操作技巧总结php+ajax技巧与应用小结asp.net ajax技巧总结专题jquery+datatables插件实现ajax加载数据与增删改查功能示例mvc+jquery.ajax异步实现增删改查和分页jquery的ajax接收java返回数据方法ajax提交到java后台之后处理数据的实现ajax java 实现自动完成功能ajax+java用户登陆注册验证的实现代码详解java ajax jsonp 跨域请求java使用ajax实现跨域上传图片功能javaweb使用cors完成跨域ajax数据交互深入ajax代理的java servlet的实现详解在java的struts中判断是否调用ajax及用拦截器对其优化ajax实现文件上传功能(spring mvc)asp.net中mvc使用ajax提交参数的匹配问题解决探讨ajax+struts2实现验证码验证功能实例代码使用ajax实现无刷新改变页面内容和地址栏urlajax设置async校验用户名是否存在的实现方法jquery ajax 向后台传递数组参数示例在实战中可能碰到的几种ajax请求方法详解ajax loading gif generatorasp小偷程序如何利用xmlhttp实现表单的提交ajax的jsonp方式跨域获取数据的简单实例jquery ajax 向后台传递数组参数ajax readystate的五种状态详解ajax中的async属性值之同步和异步jquery实现ajax定时刷新局部页面ajax传递多个参数具体实现ajax获取数据中文乱码问题最简单jquery ajax中使用serialize()方ajax获取数据然后显示在页面的实自己动手打造ajax图片上传(网上没ajax 缓存问题的两种解决方法(ie使用加载图片解决在ajax数据加载中页面出ajax 怎么设置超时(一个action执行了2遍)简单谈谈ajax核心对象浅析巧用ajax的beforesend提高用户体验ajax hacking$.ajax传json数据到后台出现报错问题解决ajax 随记ajax实现的异步传输与验证示例代码$.ajax()常用方法详解(推荐)ajax实现跨域的三种方法(代理,jsonp,xhr
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved