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