AJAX實現資料的增刪改查操作-js教程-PHP中文網

首頁

web前端

js教程

AJAX實現資料的增刪改查操作

coldplay.xixi

Aug 27, 2020 pm 04:26 PM

ajax 增刪改查數據

AJAX實現資料的增刪改查操作

【相關文章推薦：ajax影片教學】

#本文實例講述了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 += &#39;<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>&#39;;
 }
 $("#queryResult").html(x);*/
 function submit() {
 var pno = $("#pno").val();
 var name = $("#name").val();
 var sex = $(&#39;input[name="sex"]:checked&#39;).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 = $(&#39;input[name="sex_up"]:checked&#39;).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(&#39;";
 sqlInsert += pno +"&#39;,&#39;";
 sqlInsert += name +"&#39;,&#39;";
 sqlInsert += sex +"&#39;,";
 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=&#39;"+ pno +"&#39;,";
 sqlupdate += "Pname=&#39;"+ name +"&#39;,";
 sqlupdate += "Psex=&#39;"+ sex +"&#39;,";
 sqlupdate += "Page="+ age +",";
 sqlupdate += "Pheight="+ height +",";
 sqlupdate += "Pweight="+ weight;
 sqlupdate += " where Pno=&#39;"+pno+"&#39;";
 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);
 }
 
 
 
}

登入後複製

頁如下：

#對應的資料庫：

相關學習推薦：程式設計影片

以上是AJAX實現資料的增刪改查操作的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7816

Java教學

1646

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1238

Related knowledge

使用ddrescue在Linux上恢復數據 Mar 20, 2024 pm 01:37 PM

DDREASE是一種用於從檔案或區塊裝置(如硬碟、SSD、RAM磁碟、CD、DVD和USB儲存裝置)復原資料的工具。它將資料從一個區塊設備複製到另一個區塊設備，留下損壞的資料區塊，只移動好的資料區塊。 ddreasue是一種強大的恢復工具，完全自動化，因為它在恢復操作期間不需要任何干擾。此外，由於有了ddasue地圖文件，它可以隨時停止和恢復。 DDREASE的其他主要功能如下：它不會覆寫恢復的數據，但會在迭代恢復的情況下填補空白。但是，如果指示工具明確執行此操作，則可以將其截斷。將資料從多個檔案或區塊還原到單

開源！超越ZoeDepth！ DepthFM：快速且精確的單目深度估計！ Apr 03, 2024 pm 12:04 PM

0.這篇文章乾了啥？提出了DepthFM：一個多功能且快速的最先進的生成式單目深度估計模型。除了傳統的深度估計任務外，DepthFM還展示了在深度修復等下游任務中的最先進能力。 DepthFM效率高，可以在少數推理步驟內合成深度圖。以下一起來閱讀這項工作~1.論文資訊標題：DepthFM:FastMonocularDepthEstimationwithFlowMatching作者：MingGui,JohannesS.Fischer,UlrichPrestel,PingchuanMa,Dmytr

Google狂喜：JAX性能超越Pytorch、TensorFlow！或成GPU推理訓練最快選擇 Apr 01, 2024 pm 07:46 PM

谷歌力推的JAX在最近的基準測試中表現已經超過Pytorch和TensorFlow，7項指標排名第一。而且測試並不是JAX性能表現最好的TPU上完成的。雖然現在在開發者中，Pytorch依然比Tensorflow更受歡迎。但未來，也許有更多的大型模型會基於JAX平台進行訓練和運行。模型最近，Keras團隊為三個後端（TensorFlow、JAX、PyTorch）與原生PyTorch實作以及搭配TensorFlow的Keras2進行了基準測試。首先，他們為生成式和非生成式人工智慧任務選擇了一組主流

iPhone上的蜂窩數據網路速度慢：修復 May 03, 2024 pm 09:01 PM

在iPhone上面臨滯後，緩慢的行動數據連線？通常，手機上蜂窩互聯網的強度取決於幾個因素，例如區域、蜂窩網絡類型、漫遊類型等。您可以採取一些措施來獲得更快、更可靠的蜂窩網路連線。修復1–強制重啟iPhone有時，強制重啟設備只會重置許多內容，包括蜂窩網路連線。步驟1–只需按一次音量調高鍵並放開即可。接下來，按降低音量鍵並再次釋放它。步驟2–過程的下一部分是按住右側的按鈕。讓iPhone完成重啟。啟用蜂窩數據並檢查網路速度。再次檢查修復2–更改資料模式雖然5G提供了更好的網路速度，但在訊號較弱

特斯拉機器人進廠打工，馬斯克：手的自由度今年將達到22個！ May 06, 2024 pm 04:13 PM

特斯拉機器人Optimus最新影片出爐，已經可以在工廠裡打工了。正常速度下，它分揀電池（特斯拉的4680電池）是這樣的：官方還放出了20倍速下的樣子——在小小的「工位」上，揀啊揀啊揀：這次放出的影片亮點之一在於Optimus在廠子裡完成這項工作，是完全自主的，全程沒有人為的干預。而且在Optimus的視角之下，它還可以把放歪了的電池重新撿起來放置，主打一個自動糾錯：對於Optimus的手，英偉達科學家JimFan給出了高度的評價：Optimus的手是全球五指機器人裡最靈巧的之一。它的手不僅有觸覺

超級智能體生命力覺醒！可自我更新的AI來了，媽媽再也不用擔心資料瓶頸難題 Apr 29, 2024 pm 06:55 PM

哭死啊，全球狂煉大模型，一網路的資料不夠用，根本不夠用。訓練模型搞得跟《飢餓遊戲》似的，全球AI研究者，都在苦惱怎麼才能餵飽這群資料大胃王。尤其在多模態任務中，這問題尤其突出。一籌莫展之際，來自人大系的初創團隊，用自家的新模型，率先在國內把「模型生成數據自己餵自己」變成了現實。而且還是理解側和生成側雙管齊下，兩側都能產生高品質、多模態的新數據，對模型本身進行數據反哺。模型是啥？中關村論壇上剛露面的多模態大模型Awaker1.0。團隊是誰？智子引擎。由人大高瓴人工智慧學院博士生高一鑷創立，高

阿里7B多模態文件理解大模型拿下新SOTA Apr 02, 2024 am 11:31 AM

多模態文件理解能力新SOTA！阿里mPLUG團隊發布最新開源工作mPLUG-DocOwl1.5，針對高解析度圖片文字辨識、通用文件結構理解、指令遵循、外部知識引入四大挑戰，提出了一系列解決方案。話不多說，先來看效果。複雜結構的圖表一鍵識別轉換為Markdown格式：不同樣式的圖表都可以：更細節的文字識別和定位也能輕鬆搞定：還能對文檔理解給出詳細解釋：要知道，“文檔理解”目前是大語言模型實現落地的一個重要場景，市面上有許多輔助文檔閱讀的產品，有的主要透過OCR系統進行文字識別，配合LLM進行文字理

首個自主完成人類任務機器人出現，五指靈活速度超人，大模型加持虛擬空間訓練 Mar 11, 2024 pm 12:10 PM

這週，由OpenAI、微軟、貝佐斯和英偉達投資的機器人公司FigureAI宣布獲得接近7億美元的融資，計劃在未來一年內研發出可獨立行走的人形機器人。而特斯拉的擎天柱也屢屢傳出好消息。沒人懷疑，今年會是人形機器人爆發的一年。一家位於加拿大的機器人公司SanctuaryAI最近發布了一款全新的人形機器人Phoenix。官方號稱它能以和人類一樣的速率自主完成許多工作。世界上第一台能以人類速度自主完成任務的機器人Pheonix可以輕輕地抓取、移動並優雅地將每個物件放置在它的左右兩側。它能夠自主辨識物體的

See all articles

AJAX實現資料的增刪改查操作

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題