主頁 > 知識庫 > AJAX實(shí)現(xiàn)數(shù)據(jù)的增刪改查操作詳解【java后臺】

AJAX實(shí)現(xiàn)數(shù)據(jù)的增刪改查操作詳解【java后臺】

熱門標(biāo)簽:廣西智能外呼系統(tǒng)多少錢 平?jīng)龈叩碌貓D標(biāo)注商戶要收費(fèi)嗎 福建微碼電話機(jī)器人 銷售電銷機(jī)器人詐騙 外呼系統(tǒng)api對接 提高電話機(jī)器人接通率 大學(xué)校門地圖標(biāo)注 荊州智能電銷機(jī)器人 地圖標(biāo)注與公司業(yè)務(wù)關(guān)系

本文實(shí)例講述了AJAX實(shí)現(xiàn)數(shù)據(jù)的增刪改查操作。分享給大家供大家參考,具體如下:

主頁: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對象的每個(gè)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\":\"成功插入數(shù)據(jù)庫\"}";
 }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\":\"成功插入數(shù)據(jù)庫\"}";
 }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 = {"編號","姓名","性別","年齡","身高","體重"};
 ListMapString,String>> listmap = new ArrayList>();
 listmap = MysqlUtil.show(sql, params);
 for(int i =0 ; ilistmap.size();i++) {  
  for(int j=0 ; jlistmap.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);
 }
 
 
 
}

頁面如下:

對應(yīng)的數(shù)據(jù)庫:

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

更多關(guān)于ajax相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jquery中Ajax用法總結(jié)》、《JavaScript中ajax操作技巧總結(jié)》、《PHP+ajax技巧與應(yīng)用小結(jié)》及《asp.net ajax技巧總結(jié)專題》

希望本文所述對大家ajax程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:
  • Java使用Ajax實(shí)現(xiàn)跨域上傳圖片功能
  • React+ajax+java實(shí)現(xiàn)上傳圖片并預(yù)覽功能
  • 使用Ajax進(jìn)行文件與其他參數(shù)的上傳功能(java開發(fā))
  • Java后臺判斷ajax請求及處理過程詳解
  • 使用jquery 的ajax 與 Java servlet的交互代碼實(shí)例
  • java模擬ajax訪問另一個(gè)項(xiàng)目的controller代碼實(shí)例
  • Java+Ajax實(shí)現(xiàn)的用戶名重復(fù)檢驗(yàn)功能實(shí)例詳解
  • jQuery的Ajax接收java返回?cái)?shù)據(jù)方法
  • AJAX+JAVA用戶登陸注冊驗(yàn)證的實(shí)現(xiàn)代碼
  • 原生JavaScrpit中異步請求Ajax實(shí)現(xiàn)方法
  • Javaweb使用cors完成跨域ajax數(shù)據(jù)交互
  • Java使用Ajax異步上傳文件

標(biāo)簽:衡陽 內(nèi)江 樂山 海南 黔東 德陽 邯鄲 婁底

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《AJAX實(shí)現(xiàn)數(shù)據(jù)的增刪改查操作詳解【java后臺】》,本文關(guān)鍵詞  AJAX,實(shí)現(xiàn),數(shù)據(jù),的,增,刪改,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《AJAX實(shí)現(xiàn)數(shù)據(jù)的增刪改查操作詳解【java后臺】》相關(guān)的同類信息!
  • 本頁收集關(guān)于AJAX實(shí)現(xiàn)數(shù)據(jù)的增刪改查操作詳解【java后臺】的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章