AJAX實現數據的增刪改查操作詳解【java后臺】_AJAX相關

來源:腳本之家  責任編輯:小易  

www.anxorj.tw防采集請勿采集本網。

本文實例講述了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.anxorj.tw請勿采集。


  • 本文相關:
  • 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.anxorj.tw All Rights Reserved
    陕西快乐10分下载