當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
AJAXJSON
課程筆記Day46
- AJAX
- JSON
- 綜合案例
第一章 AJAX
第01節 基礎理論
1、概念說明
1. 什么是 AJAX ?AJAX是一項技術合集。他是由一套技術組合得到的新技術方案。 異步請求技術2. AJAX有什么作用呢?使用Ajax技術網頁應用能夠快速地將增量更新呈現在用戶界面上，而不需要重載（刷新）整個頁面，這使得程序能夠更快地回應用戶的操作。3. 異步和同步的概念說明?A. 異步: 多個操作是相互獨立的過程, 各自完成各自的操作,互不影響。B. 同步: 多個操作是有先后順序的執行,只有前面的操作執行完成,才能執行下一步的操作。4. 常見的應用常見?A. 校驗用戶名是否占用B. 搜索聯想的效果C. 省級聯動D. 分頁效果2、異步理解
畫圖說明（異步和同步）
3、實現方案
方案一: JavaScript 的原生態方式實現 Ajax 方案二: JQuery 的方式實現 Ajax第02節 原生JS實現
1、操作步驟
1、在JS的事件函數當中, 去創建 XMLHttpRequest() 的對象 2、設置回調函數,當異步請求ajax完畢之后的效果 xhttp.onreadystatechange = functin(){ ... } 3、打開鏈接 xhttp.open("請求方式","請求的鏈接URL",是否支持異步) 4、發送請求 xhttp.send();2、案例代碼
位置 src/blb.chc01.ReginServlet
//定義注冊的Servlet類/***** http://localhost:8080/JavaWebDay24/ReginServlet?username=zhangsan*/ @WebServlet("/ReginServlet") public class ReginServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("ReginServlet.doGet");doPost(req,resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("ReginServlet.doPost");//接收到客戶端瀏覽器發送過來的參數信息String username = req.getParameter("username");//判斷是否包含有指定的信息ArrayList<String> mList = new ArrayList<>();mList.add("zhangsan");mList.add("lisi");mList.add("wangwu");//=====[線程休眠10秒,模擬網絡卡頓]======try {Thread.sleep(10*1000);} catch (InterruptedException e) {e.printStackTrace();}//==============================String message;//判斷一下數據是否存在? 判斷集合當中是否包含有 username值if (mList.contains(username)){//數據已經存在message = "<span style='color:red'>用戶名已經被占用</span>";}else{//數據已經存在message = "<span style='color:green'>用戶名可以使用</span>";}//回復數據resp.setContentType("text/html;charset=UTF-8");resp.getWriter().println(message);} }位置 web/page/regin01.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>注冊頁面-原生JS實現AJAX</title> </head> <body><h3> 采用原生的JavaScript實現 AJAX </h3><form method="get" action="/JavaWebDay24/ReginServlet"><div><label for="username">賬號:</label><input type="text" id="username" name="username" placeholder="請輸入賬號"><span id="usernameSpan"></span></div><div><label for="password">密碼:</label><input type="text" id="password" name="password" placeholder="請輸入密碼"><span id="passwordSpan"></span></div><div><input type="submit" value="確認注冊"></div> </form></body> </html><script>//頁面加載完畢之后的函數,類似于 JQuery的入口函數window.onload = function () {//給我們的 用戶名的輸入框,綁定事件,綁定失去焦點的事件。document.querySelector("#username").onblur = function () {//獲取到輸入框當中輸入的數據let username = this.value;//----------------------------//1. 準備XMLHttpRequest的對象let xhttp = new XMLHttpRequest();//2. 設置回調函數,當請求發送完畢,接收數據之后做的事情xhttp.onreadystatechange = function () {//判斷當前的狀態。200響應成功,4表示請求成功。if (xhttp.readyState===4 && xhttp.status === 200){document.querySelector("#usernameSpan").innerHTML = xhttp.responseText;}}//3. 打開鏈接let urlMessage = "/JavaWebDay24/ReginServlet?username="+username;//參數1: 請求的方式//參數2: 請求的URL地址//參數3: 是否支持異步操作 true 表示支持xhttp.open("GET",urlMessage,true);//4. 發送請求xhttp.send();}} </script>第03節 JQuery實現Ajax
1、發送GET請求
操作步驟
$.get("請求的URL地址",function回調函數);案例代碼
位置 src/blb.chc01.ReginServlet
//定義注冊的Servlet類/***** http://localhost:8080/JavaWebDay24/ReginServlet?username=zhangsan*/ @WebServlet("/ReginServlet") public class ReginServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("ReginServlet.doGet");doPost(req,resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("ReginServlet.doPost");//接收到客戶端瀏覽器發送過來的參數信息String username = req.getParameter("username");Map<String, String[]> map = req.getParameterMap();map.forEach((key,value)-> System.out.println(key+","+value));//判斷是否包含有指定的信息ArrayList<String> mList = new ArrayList<>();mList.add("zhangsan");mList.add("lisi");mList.add("wangwu");String message;//判斷一下數據是否存在? 判斷集合當中是否包含有 username值if (mList.contains(username)){//數據已經存在message = "<span style='color:red'>用戶名已經被占用</span>";}else{//數據已經存在message = "<span style='color:green'>用戶名可以使用</span>";}//回復數據resp.setContentType("text/html;charset=UTF-8");resp.getWriter().println(message);} }位置 web/page/regin04.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><title>注冊頁面-采用JQuery發送GET請求,實現AJAX</title> </head> <body><h3> 采用JQuery發送GET請求,實現AJAX </h3><form method="get" action="${pageContext.request.contextPath}/ReginServlet"><div><label for="username">賬號:</label><input type="text" id="username"name="username" placeholder="請輸入賬號"><span id="usernameSpan"></span></div><div><label for="password">密碼:</label><input type="text" id="password"name="password" placeholder="請輸入密碼"><span id="passwordSpan"></span></div><div><input type="submit" value="確認注冊"></div> </form> </body> </html><script src="../js/jquery-3.3.1.min.js"></script> <script>$(function () {//輸入框失去焦點之后的事件處理$("#username").blur(function () {//獲取到輸入框的數據值let username = this.value;//采用Ajax發送get請求let url = "${pageContext.request.contextPath}/ReginServlet" + "?username="+username;//參數1: 發送請求的URL地址//參數2: 回調函數,當請求發送之后,響應的數據,響應的數據值就是 data$.get(url,function (data) {$("#usernameSpan").html(data);});});}); </script>2、發送POST請求
操作步驟
$.post("請求的URL地址",請求參數,function回調函數);案例代碼
位置 src/blb.chc01.ReginServlet
//定義注冊的Servlet類/***** http://localhost:8080/JavaWebDay24/ReginServlet?username=zhangsan*/ @WebServlet("/ReginServlet") public class ReginServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("ReginServlet.doGet");doPost(req,resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("ReginServlet.doPost");//接收到客戶端瀏覽器發送過來的參數信息String username = req.getParameter("username");Map<String, String[]> map = req.getParameterMap();map.forEach((key,value)-> System.out.println(key+","+value));//判斷是否包含有指定的信息ArrayList<String> mList = new ArrayList<>();mList.add("zhangsan");mList.add("lisi");mList.add("wangwu");String message;//判斷一下數據是否存在? 判斷集合當中是否包含有 username值if (mList.contains(username)){//數據已經存在message = "<span style='color:red'>用戶名已經被占用</span>";}else{//數據已經存在message = "<span style='color:green'>用戶名可以使用</span>";}//回復數據resp.setContentType("text/html;charset=UTF-8");resp.getWriter().println(message);} }位置 web/page/regin05.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><title>注冊頁面-采用JQuery發送POST請求,實現AJAX</title> </head> <body><h3> 采用JQuery發送POST請求,實現AJAX </h3><form method="post" action="${pageContext.request.contextPath}/ReginServlet"><div><label for="username">賬號:</label><input type="text" id="username"name="username" placeholder="請輸入賬號"><span id="usernameSpan"></span></div><div><label for="password">密碼:</label><input type="text" id="password"name="password" placeholder="請輸入密碼"><span id="passwordSpan"></span></div><div><input type="submit" value="確認注冊"></div> </form> </body> </html><script src="../js/jquery-3.3.1.min.js"></script> <script>$(function () {//輸入框失去焦點之后的事件處理$("#username").blur(function () {//獲取到輸入框的數據值let username = this.value;//采用Ajax發送get請求let url = "${pageContext.request.contextPath}/ReginServlet";let params = {"username":username};//參數1: 發送請求的URL地址//參數2: 請求參數//參數3: 回調函數,當請求發送之后,響應的數據,響應的數據值就是 data$.post(url,params,function (data) {$("#usernameSpan").html(data);});});}); </script>3、發送通用請求
操作步驟
$.ajax({鍵1:"值1",鍵2:"值2",鍵3:"值3" });案例代碼
位置 src/blb.chc01.ReginServlet
//定義注冊的Servlet類/***** http://localhost:8080/JavaWebDay24/ReginServlet?username=zhangsan*/ @WebServlet("/ReginServlet") public class ReginServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("ReginServlet.doGet");doPost(req,resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("ReginServlet.doPost");//接收到客戶端瀏覽器發送過來的參數信息String username = req.getParameter("username");Map<String, String[]> map = req.getParameterMap();map.forEach((key,value)-> System.out.println(key+","+value));//判斷是否包含有指定的信息ArrayList<String> mList = new ArrayList<>();mList.add("zhangsan");mList.add("lisi");mList.add("wangwu");String message;//判斷一下數據是否存在? 判斷集合當中是否包含有 username值if (mList.contains(username)){//數據已經存在message = "<span style='color:red'>用戶名已經被占用</span>";}else{//數據已經存在message = "<span style='color:green'>用戶名可以使用</span>";}//回復數據resp.setContentType("text/html;charset=UTF-8");resp.getWriter().println(message);} }位置 web/page/regin06.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><title>注冊頁面-采用JQuery發送通用請求,實現AJAX</title> </head> <body><h3> 采用JQuery發送通用請求,實現AJAX </h3><form method="get" action="${pageContext.request.contextPath}/ReginServlet"><div><label for="username">賬號:</label><input type="text" id="username"name="username" placeholder="請輸入賬號"><span id="usernameSpan"></span></div><div><label for="password">密碼:</label><input type="text" id="password"name="password" placeholder="請輸入密碼"><span id="passwordSpan"></span></div><div><input type="submit" value="確認注冊"></div> </form> </body> </html><script src="../js/jquery-3.3.1.min.js"></script> <script>$(function () {//輸入框失去焦點之后的事件處理$("#username").blur(function () {//獲取到輸入框的數據值let username = this.value;//采用通用的方式去發送 ajax請求/**** url: 表示的是請求的URL地址* data: 請求的參數信息* async: 表示是否支持異步操作,true表示支持,false表示不支持。默認是true* type: 請求的類型,GET或者POST* success: 請求成功之后的回調函數,當成功之后,做什么*/$.ajax({url:"${pageContext.request.contextPath}/ReginServlet",data:{"username":username},async:true,type:"POST",success:function (data) {$("#usernameSpan").html(data);}});});}); </script>第二章 JSON
第01節 基礎理論
1、三種json格式
格式一:A. 類型: 對象類型B. 語法:{"name":"zhangsan","age":23,"gender":"男"}C. 說明:鍵是字符串類型, 值是任意類型。對象類型，采用大括號包起來。格式二:A. 類型:數組類型B. 語法:[{"name":"zhangsan","age":23,"gender":"男"},{"name":"lisi","age":24,"gender":"男"}]C. 說明:對象類型，采用是中括號,包裹著對象,對象是大括號包裹著,里面由鍵值對組成格式三:A. 類型:混合類型B: 語法:{message:[{"name":"zhangsan","age":23,"gender":"男"},{"name":"lisi","age":24,"gender":"男"}]}C. 說明:由對象和數組,綜合在一起組成的效果2、常用的類
操作步驟
在這里我們采用的是 jacksonJSON 解析的方式。SpringMVC 當中內置的解析方式。操作步驟:A. 導入jar包 jackson-annotations-2.2.1.jarjackson-core-2.2.1.jarjackson-databind-2.2.1.jarB. 創建ObjectMapper的對象C. 讀寫數據 readAs... writeAs...常用類
1. ObjectMapper 他是我們 JacksonJson的核心類 2. TypeReference 主要是針對于集合的泛型,進行操作的第02節 案例代碼
1、對象變成JSON
//專門用于測試，寫對象的操作 @SuppressWarnings("all") public class Demo01 {//寫對象//{"name":"張三","age":23,"gender":"男"}@Testpublic void testWriteObject() throws Exception {//創建對象Student stu = new Student("張三", 23, "男");//寫對象ObjectMapper mapper = new ObjectMapper();String json = mapper.writeValueAsString(stu);System.out.println(json);//將數據保存到文件當中String path = "C:\\develop\\workspace\\java210712A\\JavaWebDay24\\web\\dir\\object.txt";BufferedWriter bw = new BufferedWriter(new FileWriter(path));bw.write(json);bw.newLine();bw.flush();bw.close();}//寫數組//[{"name":"張三","age":23,"gender":"男"},{"name":"李四","age":24,"gender":"女"}]@Testpublic void testWriteArray() throws Exception {//創建對象Student stu1 = new Student("張三", 23, "男");Student stu2 = new Student("李四", 24, "女");ArrayList<Student> mlist = new ArrayList<>();mlist.add(stu1);mlist.add(stu2);//寫數組ObjectMapper mapper = new ObjectMapper();String json = mapper.writeValueAsString(mlist);System.out.println(json);//將數據保存到文件當中String path = "C:\\develop\\workspace\\java210712A\\JavaWebDay24\\web\\dir\\array.txt";BufferedWriter bw = new BufferedWriter(new FileWriter(path));bw.write(json);bw.newLine();bw.flush();bw.close();}//寫復雜類型//{"message":[{"name":"張三","age":23,"gender":"男"},{"name":"李四","age":24,"gender":"女"}],"status":200}@Testpublic void testWriteComplex() throws Exception{//創建對象Student stu1 = new Student("張三", 23, "男");Student stu2 = new Student("李四", 24, "女");List<Student> mlist = new ArrayList<>();mlist.add(stu1);mlist.add(stu2);HashMap<String, Object> map = new HashMap<>();map.put("message",mlist);map.put("status",200);ObjectMapper mapper = new ObjectMapper();String json = mapper.writeValueAsString(map);System.out.println(json);//將數據保存到文件當中String path = "C:\\develop\\workspace\\java210712A\\JavaWebDay24\\web\\dir\\complex.txt";BufferedWriter bw = new BufferedWriter(new FileWriter(path));bw.write(json);bw.newLine();bw.flush();bw.close();} }2、JSON轉變對象
//如果是JSON轉換成為對象 @SuppressWarnings("all") public class Demo02 {//讀取對象的操作//{"name":"張三","age":23,"gender":"男"}@Testpublic void testReadObject() throws Exception {String json;String path = "C:\\develop\\workspace\\java210712A\\JavaWebDay24\\web\\dir\\object.txt";BufferedReader br = new BufferedReader(new FileReader(path));json = br.readLine();br.close();System.out.println("json = " + json);//將數據轉換成為對象ObjectMapper mapper = new ObjectMapper();Student stu = mapper.readValue(json, Student.class);System.out.println("stu = " + stu);}//讀取數組的操作//[{"name":"張三","age":23,"gender":"男"},{"name":"李四","age":24,"gender":"女"}]@Testpublic void testReadArray() throws Exception {String json;String path = "C:\\develop\\workspace\\java210712A\\JavaWebDay24\\web\\dir\\array.txt";BufferedReader br = new BufferedReader(new FileReader(path));json = br.readLine();br.close();System.out.println("json = " + json);//將數據轉換成為數組ObjectMapper mapper = new ObjectMapper();List<Student> mList = mapper.readValue(json, new TypeReference<List<Student>>() {});//展示結果mList.forEach(System.out::println);}//讀取復雜的操作//{"message":[{"name":"張三","age":23,"gender":"男"},{"name":"李四","age":24,"gender":"女"}],"status":200}@Testpublic void testReadComplex() throws Exception {String json;String path = "C:\\develop\\workspace\\java210712A\\JavaWebDay24\\web\\dir\\complex.txt";BufferedReader br = new BufferedReader(new FileReader(path));json = br.readLine();br.close();System.out.println("json = " + json);//將數據轉換成為數組ObjectMapper mapper = new ObjectMapper();//更換另外一套API操作JsonNode rootNode = mapper.readTree(json);String s = rootNode.get("message").toString();//對message的信息，再次進行JSON解析List<Student> mlist = mapper.readValue(s,new TypeReference<List<Student>>(){});mlist.forEach(System.out::println);} }第三章 綜合案例
第01節 需求說明
1、需求介紹
制作一個搜索聯想的案例，在輸入框當中輸入人物的姓，可以展示所有的與姓相關的名字。例如:在輸入框當中, 輸入數據 "宋"可以展示得到以下幾個數據: "宋江"、"宋清"、"宋萬"2、分析說明
第02節 案例代碼
1、數據準備
-- 01. 使用數據庫 DROP DATABASE IF EXISTS db01; CREATE DATABASE IF NOT EXISTS db01; USE db01;-- 02. 刪除表,如果存在則刪除 DROP TABLE IF EXISTS waterhero;-- 03. 創建表 CREATE TABLE IF NOT EXISTS waterhero (id INT(3) PRIMARY KEY AUTO_INCREMENT, -- 編號rank VARCHAR(16), -- 排名star VARCHAR(16), -- 星座nicename VARCHAR(16), -- 人物花名truename VARCHAR(16), -- 真實姓名description VARCHAR(1024) -- 性格描述 );-- 04. 插入數據 INSERT INTO waterhero VALUES ('1', '一', '天魁星', '及時雨（呼保義）', '宋江', '孝順忠君 有領導才能'); INSERT INTO waterhero VALUES ('2', '二', '天罡星', '玉麒麟', '盧俊義', '武功高強，為人固執'); INSERT INTO waterhero VALUES ('3', '三', '天機星', '智多星', '吳用', '足智多謀，善用計策'); INSERT INTO waterhero VALUES ('4', '四', '天閑星', '入云龍', '公孫勝', '正直大氣，武藝高強'); INSERT INTO waterhero VALUES ('5', '五', '天勇星', '大刀', '關勝', '文武雙全，赤膽忠心'); INSERT INTO waterhero VALUES ('6', '六', '天雄星', '豹子頭', '林沖', '為人正直，隱忍善良'); INSERT INTO waterhero VALUES ('7', '七', '天猛星', '霹靂火', '秦明', '性格急躁，聲如雷霆'); INSERT INTO waterhero VALUES ('8', '八', '天威星', '雙鞭', '呼延灼', '正直，大氣'); INSERT INTO waterhero VALUES ('9', '九', '天英星', '小李廣', '花榮', '武功高強，為人仗義'); INSERT INTO waterhero VALUES ('10', '十', ' 天貴星', '小旋風', '柴進', ' 為人慷慨，見義勇為'); INSERT INTO waterhero VALUES ('11', '十一', '天富星', '撲天雕', '李應', '嫉惡如仇，見義勇為'); INSERT INTO waterhero VALUES ('12', '十二', '天滿星', '美髯公', '朱仝', '仗義疏財，義字當頭'); INSERT INTO waterhero VALUES ('13', '十三', '天孤星', '花和尚', '魯智深', '心地剛直，生性兇頑'); INSERT INTO waterhero VALUES ('14', '十四', '天傷星', '行者', '武松', '光明磊落，敢作敢為'); INSERT INTO waterhero VALUES ('15', '十五', '天立星', '雙槍將', '董平', '沖動 忠肝義膽 好勝'); INSERT INTO waterhero VALUES ('16', '十六', '天捷星', '沒羽箭', '張清', '性格內向,非常內斂'); INSERT INTO waterhero VALUES ('17', '十七', '天暗星', '青面獸', '楊志', '勤快，身手不凡'); INSERT INTO waterhero VALUES ('18', '十八', '天佑星', '金槍手', '徐寧', '膽大,有萬夫不擋之勇'); INSERT INTO waterhero VALUES ('19', '十九', '天空星', '急先鋒', '索超', '性子急，執著，魯莽'); INSERT INTO waterhero VALUES ('20', '二十', '天速星', '神行太保', '戴宗', '嫉惡如仇、俠肝義膽、脾氣火爆'); INSERT INTO waterhero VALUES ('21', '二十一', '天異星', '赤發鬼', '劉唐', '勇猛莽撞'); INSERT INTO waterhero VALUES ('22', '二十二', '天殺星', '黒旋風', '李逵 ', '正直粗魯，勇猛無比'); INSERT INTO waterhero VALUES ('23', '二十三', '天微星', '九紋龍', '史進', '武藝高超，嫉惡如仇'); INSERT INTO waterhero VALUES ('24', '二十四', '天究星', '沒遮攔', '穆弘', '平凡善良、耐心平和、持重端莊'); INSERT INTO waterhero VALUES ('25', '二十五', '天退星', '插翅虎', '雷橫', '脾氣暴躁，為人耿直'); INSERT INTO waterhero VALUES ('26', '二十六', '天壽星', '混江龍', '李俊', '為人正直，水中功夫超強'); INSERT INTO waterhero VALUES ('27', '二十七', '天劍星', '立地太歲', '阮小二', '武藝出眾，英勇善戰'); INSERT INTO waterhero VALUES ('28', '二十八', '天平星', '船火兒', '張橫', '英勇善戰'); INSERT INTO waterhero VALUES ('29', '二十九', '天罪星', '短命二郎', '阮小五', '水中好漢，奮勇殺敵'); INSERT INTO waterhero VALUES ('30', '三十', '天損星', '浪里白條', '張順', '水中功夫好，豪爽仗義，懲惡濟善，有仇必報'); INSERT INTO waterhero VALUES ('31', '三十一', '天敗星', '活閻羅', '阮小七', '心快口快'); INSERT INTO waterhero VALUES ('32', '三十二', '天牢星', '病關索', '楊雄', '為人正直'); INSERT INTO waterhero VALUES ('33', '三十三', '天慧星', '拼命三郎', '石秀', '打抱不平'); INSERT INTO waterhero VALUES ('34', '三十四', '天暴星', '兩頭蛇', '解珍', '作戰英勇'); INSERT INTO waterhero VALUES ('35', '三十五', '天哭星', '雙尾蝎', '解寶', '為人靈活，作戰英勇'); INSERT INTO waterhero VALUES ('36', '三十六', '天巧星', '浪子', '燕青', '武功高強，為人風流'); INSERT INTO waterhero VALUES ('37', '三十七', '地魁星', '神機軍師', '朱武', '精通陣法，廣有謀略'); INSERT INTO waterhero VALUES ('38', '三十八', '地煞星', '鎮三山', '黃信', '一身好武藝，英勇善戰'); INSERT INTO waterhero VALUES ('39', '三十九', '地勇星', '病尉遲', '孫立', '精熟弓馬，武藝過人，正直'); INSERT INTO waterhero VALUES ('40', '四十', '地杰星', '丑郡馬', '宣贊', '相貌丑陋，武藝出眾'); INSERT INTO waterhero VALUES ('41', '四十一', '地雄星', '井木犴', '郝思文', '仗義俠膽，有勇有謀'); INSERT INTO waterhero VALUES ('42', '四十二', '地威星', '百勝將', '韓滔', '力大無窮，有勇有謀'); INSERT INTO waterhero VALUES ('43', '四十三', '地英星', '天目將', '彭玘', '扶危救困，義氣第一'); INSERT INTO waterhero VALUES ('44', '四十四', '地奇星', '圣水將', '單廷圭', '風流瀟灑，氣宇軒昂'); INSERT INTO waterhero VALUES ('45', '四十五', '地猛星', '神火將', '魏定國', '風流瀟灑，禮貌待人'); INSERT INTO waterhero VALUES ('46', '四十六', '地文星', '圣手書生', '蕭讓', '擅長寫字，不愛說話'); INSERT INTO waterhero VALUES ('47', '四十七', '地正星', '鐵面孔目', '裴宣', '忍辱負重，忠誠憨厚'); INSERT INTO waterhero VALUES ('48', '四十八', '地闊星', '摩云金翅', '歐鵬', '武功不低，挫折感強，比較謹慎'); INSERT INTO waterhero VALUES ('49', '四十九', '地闔星', '火眼狻猊', '鄧飛', '武功不差，舍己為人'); INSERT INTO waterhero VALUES ('50', '五十', '地強星', '錦毛虎', '燕順', '有情有義，重英雄'); INSERT INTO waterhero VALUES ('51', '五十一', '地暗星', '錦豹子', '楊林', '聰明，比較謹慎'); INSERT INTO waterhero VALUES ('52', '五十二', '地軸星', '轟天雷', '凌振', '精通武藝，是一個非常厲害的人物'); INSERT INTO waterhero VALUES ('53', '五十三', '地會星', '神算子', '蔣敬', '武藝高強，膽大'); INSERT INTO waterhero VALUES ('54', '五十四', '地佐星', '小溫侯', '呂方', '為人忠義 武功高強 不服輸'); INSERT INTO waterhero VALUES ('55', '五十五', '地佑星', '賽仁貴', '郭盛', '有勇無謀,義氣為重'); INSERT INTO waterhero VALUES ('56', '五十六', '地靈星', '神醫', '安道全', '醫術高明，好色'); INSERT INTO waterhero VALUES ('57', '五十七', '地獸星', '紫髯伯', '皇甫端', '醫道高明，診治馬病，手到病除，胡須大紫'); INSERT INTO waterhero VALUES ('58', '五十八', '地微星', '矮腳虎', '王英', '身材矮小，脾氣暴躁'); INSERT INTO waterhero VALUES ('59', '五十九', '地慧星', '一丈青', '扈三娘', '機智聰明，為人仗義'); INSERT INTO waterhero VALUES ('60', '六十', '地暴星', '喪門神', '鮑旭', '正直粗魯，勇猛無比'); INSERT INTO waterhero VALUES ('61', '六十一', '地然星', '混世魔王', '樊瑞', '陰柔有余、陽剛不足'); INSERT INTO waterhero VALUES ('62', '六十二', '地猖星', '毛頭星', '孔明', '為人行俠仗義 武藝平平 忠肝義膽'); INSERT INTO waterhero VALUES ('63', '六十三', '地狂星', '獨火星', '孔亮', '本事低微，武功很差'); INSERT INTO waterhero VALUES ('64', '六十四', '地飛星', '八臂哪吒', '項充', '有情有義，武藝高強'); INSERT INTO waterhero VALUES ('65', '六十五', '地走星', '飛天大圣', '李袞', ' 武藝高強 四海之內皆兄'); INSERT INTO waterhero VALUES ('66', '六十六', '地巧星', '玉臂匠', '金大堅', '技藝高超，善于雕刻'); INSERT INTO waterhero VALUES ('67', '六十七', '地明星', '鐵笛仙', '馬麟', '好勇斗狠，講義氣'); INSERT INTO waterhero VALUES ('68', '六十八', '地進星', '出洞蛟', '童威', '能伏水，會駕船'); INSERT INTO waterhero VALUES ('69', '六十九', '地退星', '翻江蜃', '童猛', '水性極好'); INSERT INTO waterhero VALUES ('70', '七十', '地滿星', '玉幡竿', '孟康', '人高馬大，善于制造大小船只'); INSERT INTO waterhero VALUES ('71', '七十一', '地遂星', '通臂猿', '侯健', '飛針走線，技藝高超'); INSERT INTO waterhero VALUES ('72', '七十二', '地周星', '跳澗虎', '陳達', '體魄強健,生性粗魯'); INSERT INTO waterhero VALUES ('73', '七十三', '地隱星', '白花蛇', '楊春', '使一口大桿刀，武藝精熟'); INSERT INTO waterhero VALUES ('74', '七十四', '地異星', '白面郎君', '鄭天壽', '魯莽，比較重義氣'); INSERT INTO waterhero VALUES ('75', '七十五', '地理星', '九尾龜', '陶宗旺', '力大無比，正直勇敢'); INSERT INTO waterhero VALUES ('76', '七十六', '地俊星', '鐵扇子', '宋清', '為人誠懇，熱情好客'); INSERT INTO waterhero VALUES ('77', '七十七', '地樂星', '鐵叫子', '樂和', '文武全行、且興趣廣泛、聰明絕頂'); INSERT INTO waterhero VALUES ('78', '七十八', '地捷星', '花項虎', '龔旺', '一生行俠仗義，性格耿直'); INSERT INTO waterhero VALUES ('79', '七十九', '地速星', '中箭虎', '丁得孫', '為人勇猛 武藝高強 藝高 膽大 有義氣'); INSERT INTO waterhero VALUES ('80', '八十', '地鎮星', '小遮攔', '穆春', '武藝高強 崇尚忠義'); INSERT INTO waterhero VALUES ('81', '八十一', '地羈星', '操刀鬼', '曹正', '平時像個孩子，性格天真 活潑。但戰斗時，不顧一切戰斗'); INSERT INTO waterhero VALUES ('82', '八十二', '地魔星', '云里金剛', '宋萬', '高大威猛，武藝平常'); INSERT INTO waterhero VALUES ('83', '八十三', '地妖星', '摸著天', '杜遷', '本事平平，武藝一般'); INSERT INTO waterhero VALUES ('84', '八十四', '地幽星', '病大蟲', '薛永', '講義氣，重朋友'); INSERT INTO waterhero VALUES ('85', '八十五', '地僻星', '打虎將', '李忠', '做事慳吝小氣 不慷慨'); INSERT INTO waterhero VALUES ('86', '八十六', '地空星', '小霸王', '周通', '魯莽，粗暴，不仗義'); INSERT INTO waterhero VALUES ('87', '八十七', '地孤星', '金錢豹子', '湯隆', '為人義氣，性情耿直，為山寨盡心竭力'); INSERT INTO waterhero VALUES ('88', '八十八', '地全星', '鬼臉兒', '杜興', '魯莽，講義氣'); INSERT INTO waterhero VALUES ('89', '八十九', '地短星', '出林龍', '鄒淵', '沖動 好賭 貪婪'); INSERT INTO waterhero VALUES ('90', '九十', '地角星', '獨角龍', '鄒潤', '慷慨大義'); INSERT INTO waterhero VALUES ('91', '九十一', '地囚星', '旱地忽律', '朱貴', '性格直率，善良'); INSERT INTO waterhero VALUES ('92', '九十二', '地藏星', '笑面虎', '朱富', '行俠仗義 嫉惡如仇 仔細 謹慎'); INSERT INTO waterhero VALUES ('93', '九十三', '地伏星', '金眼彪', '施恩', '使得一身好拳棒，會施展恩惠'); INSERT INTO waterhero VALUES ('94', '九十四', '地平星', '鐵臂膊', '蔡福', '替天行道，正義'); INSERT INTO waterhero VALUES ('95', '九十五', '地損星', '一枝花', '蔡慶', '大義，武功高強'); INSERT INTO waterhero VALUES ('96', '九十六', '地奴星', '催命判官', '李立', '武藝高超，為人仗義'); INSERT INTO waterhero VALUES ('97', '九十七', '地察星', '青眼虎', '李云', '率直 仗義'); INSERT INTO waterhero VALUES ('98', '九十八', '地惡星', '沒面目', '焦挺', '拳腳熟練，講義氣'); INSERT INTO waterhero VALUES ('99', '九十九', '地丑星', '石將軍', '石勇', '武功一般，粗蠻膽大'); INSERT INTO waterhero VALUES ('100', '一百', '地數星', '小尉遲', '孫新', '正直勇敢，講義氣'); INSERT INTO waterhero VALUES ('101', '一百零一', '地陰星', '母大蟲', '顧大嫂', '豪爽急躁，倔強暴躁'); INSERT INTO waterhero VALUES ('102', '一百零二', '地刑星', '菜園子', '張青', '性格內向,憨厚老實'); INSERT INTO waterhero VALUES ('103', '一百零三', '地壯星', '母夜叉', '孫二娘', '性情暴躁,舉止粗魯'); INSERT INTO waterhero VALUES ('104', '一百零四', '地劣星', '活閃婆', '王定六', '嫉惡如仇 識英雄 路見不平拔刀相助'); INSERT INTO waterhero VALUES ('105', '一百零五', '地健星', '險道神', '郁保四', '忠義雙全 重英雄'); INSERT INTO waterhero VALUES ('106', '一百零六', '地耗星', '白日鼠', '白勝', '仗義，堅定'); INSERT INTO waterhero VALUES ('107', '一百零七', '地賊星', '鼓上蚤', '時遷', '聰明機智，社會經驗豐富 ，善于喬裝打扮'); INSERT INTO waterhero VALUES ('108', '一百零八', '地狗星', '金毛犬', '段景住', '性格沉穩，脾氣好');-- 05. 查詢數據表 SELECT * FROM waterhero;2、Dao和Service實現
位置 src/blb.chc03.bean.HeroBean
public class HeroBean {private int id;private String rank;private String star;private String nicename;private String truename;private String description;public HeroBean() {}public HeroBean(int id, String rank, String star, String nicename, String truename, String description) {this.id = id;this.rank = rank;this.star = star;this.nicename = nicename;this.truename = truename;this.description = description;}public int getId() {return id;}public void setId(int id) {this.id = id;}public String getRank() {return rank;}public void setRank(String rank) {this.rank = rank;}public String getStar() {return star;}public void setStar(String star) {this.star = star;}public String getNicename() {return nicename;}public void setNicename(String nicename) {this.nicename = nicename;}public String getTruename() {return truename;}public void setTruename(String truename) {this.truename = truename;}public String getDescription() {return description;}public void setDescription(String description) {this.description = description;}@Overridepublic String toString() {return "HeroBean{" +"id=" + id +", rank='" + rank + '\'' +", star='" + star + '\'' +", nicename='" + nicename + '\'' +", truename='" + truename + '\'' +", description='" + description + '\'' +'}';} }位置： src/blb.chc03.dao.HeroDao
package blb.chc03.dao;import blb.chc03.bean.HeroBean;import java.util.List;public interface HeroDao {//定義一個方法，根據名稱查詢所有public abstract List<HeroBean> selectByName(String name); }位置：src/blb.chc03.dao.impl.HeroDaoImpl
import blb.chc03.bean.HeroBean; import blb.chc03.dao.HeroDao; import blb.chc03.util.JDBCUtil; import org.springframework.jdbc.core.BeanPropertyRowMapper; import org.springframework.jdbc.core.JdbcTemplate;import java.util.List;public class HeroDaoImpl implements HeroDao {@Overridepublic List<HeroBean> selectByName(String name) {//定義sql語句String sql = "SELECT * FROM waterhero WHERE truename LIKE '" + name + "%'";//采用 JdbcTemplate 去完成JdbcTemplate template = new JdbcTemplate(JDBCUtil.getDataSource());List<HeroBean> mList = template.query(sql, new BeanPropertyRowMapper<>(HeroBean.class));return mList;} }位置 src/blb.chc03.service.HeroService
package blb.chc03.service;import blb.chc03.bean.HeroBean;import java.util.List;public interface HeroService {//定義一個方法，根據名稱查詢所有public abstract List<HeroBean> selectByName(String name); }位置 src/blb.chc03.service.impl.HeroServiceImpl
package blb.chc03.service.impl;import blb.chc03.bean.HeroBean; import blb.chc03.dao.HeroDao; import blb.chc03.dao.impl.HeroDaoImpl; import blb.chc03.service.HeroService;import java.util.List;public class HeroServiceImpl implements HeroService {@Overridepublic List<HeroBean> selectByName(String name) {//只需要創建 HeroDao 里面的對象，得到結果HeroDao dao = new HeroDaoImpl();List<HeroBean> heroBeanList = dao.selectByName(name);return heroBeanList;} }位置 src/blb.chc03.util.JDBCUtil
package blb.chc03.util;import com.alibaba.druid.pool.DruidDataSourceFactory;import javax.sql.DataSource; import java.io.FileInputStream; import java.io.InputStream; import java.sql.Connection; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; import java.util.Properties;public class JDBCUtil {private static DataSource ds = null;static {try {String path = "C:\\develop\\workspace\\java210712A\\JavaWebDay24\\web\\dir\\druid.properties";FileInputStream is = new FileInputStream(path);Properties pp = new Properties();pp.load(is);is.close();ds = DruidDataSourceFactory.createDataSource(pp);} catch (Exception e) {e.printStackTrace();}}/*** 獲取到連接池對象的方法*/public static DataSource getDataSource(){return ds;}/**** 獲取到連接的對象*/public static Connection getConnection() {Connection conn = null;try {//預防空指針異常。如果我們的 Properties 內容錯誤if (ds != null) {conn = ds.getConnection();}} catch (SQLException e) {e.printStackTrace();}return conn;}/*** 釋放資源*/public static void close(Connection conn, Statement stat){close(conn,stat,null);}public static void close(Connection conn, Statement stat, ResultSet resu){if (resu!=null){try {resu.close();} catch (SQLException e) {e.printStackTrace();}}if (stat!=null){try {stat.close();} catch (SQLException e) {e.printStackTrace();}}if (conn!=null){try {conn.close();} catch (SQLException e) {e.printStackTrace();}}} }3、Servlet的實現
/**** http://localhost:8080/JavaWebDay24/HeroServlet?truename=宋*/@WebServlet("/HeroServlet") public class HeroServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("HeroServlet.doGet");doPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("HeroServlet.doPost");//編碼方式和數據的獲取req.setCharacterEncoding("UTF-8");resp.setContentType("text/html;charset=UTF-8");String truename = req.getParameter("truename");//訪問服務層 service 的代碼HeroService service = new HeroServiceImpl();List<HeroBean> mList = service.selectByName(truename);//封裝成為JSON數據ObjectMapper mapper = new ObjectMapper();String json = mapper.writeValueAsString(mList);//響應數據給瀏覽器resp.getWriter().println(json);} }4、JSP頁面實現
<%@ page import="com.fasterxml.jackson.databind.ObjectMapper" %> <%@ page import="blb.chc03.bean.HeroBean" %> <%@ page import="java.util.List" %> <%@ page import="com.fasterxml.jackson.core.type.TypeReference" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><title>搜索聯想案例</title> </head> <body><form method="get" action="${pageContext.request.contextPath}/HeroServlet"><input id="truename" type="text" name="truename" placeholder="請輸入水滸英雄的名字"> </form> <div id="divid"></div></body> </html><script src="../js/jquery-3.3.1.min.js"></script> <script>$(function () {$("#truename").change(function () {//獲取到數據值let truename = this.value;//準備發送ajax請求$.ajax({url:"${pageContext.request.contextPath}/HeroServlet",data:{"truename":truename},async:true,type:"GET",success:function (data) {//直接展示結果$("#divid").html(data);}});});}); </script>總結
- 上一篇： Java正则表达式语法与示例
- 下一篇： HTC 手机解锁