Ajax（jquery）入門程式--------仿百度提示
- 前端介面實現：
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> </head> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(function(){ //捕獲鍵盤彈起事件 $("#word").keyup(function() { //1. 獲取輸入框的值 //var word = $("#word").val(); //this 對應就是執行這個方法的那個物件， $("#word") var word = $(this).val(); if(word == ""){ $("#div01").hide(); }else{ //3. ajax請求資料(key-value) $.post("find/allwords.mvc",{word:word} ,function(data , status){ alert(data); $("#div01").show(); $("#div01").html(data); }); } }) }); </script> <body> <center> <h2>百度</h2> <input type="text" name="word" id="word" style="width: 600px ; height: 50px ;font-size: 20px;"> <input type="button" value="百度一下" style="height: 55px ; width: 100px ; "> <div id="div01" style="position:relative; left : -54px; width: 600px; height: 200px ; border: 1px solid blue; display: none"></div> </center> </body> </html>
- 伺服器端實現：這裡使用的是servlet，也可以使用其他框架。只給出了controller層的實現，service和dao層的實現省略
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); try { //1. 先獲取引數 String word = request.getParameter("word"); System.out.println("word="+word); //2. 讓dao執行查詢 WordsDao dao = new WordsDaoImpl(); List<WordBean> list = dao.findWords(word); for (WordBean wordBean : list) { System.out.println("==="+wordBean.toString()); } request.setAttribute("list", list); response.setContentType("text/html;charset=utf-8"); //3. 返回資料：填充資料到搜尋提示框然後將list.jsp進行返回 request.getRequestDispatcher("list.jsp").forward(request, response); } catch (SQLException e) { e.printStackTrace(); } }
- 搜尋提示框：list.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <table style="width: 100%"> <c:forEach items="${list }" var="wordBean"> <tr> <td>${wordBean.words}</td> </tr> </c:forEach> </table>
- 資料庫 設計
- 效果截圖：
jQuery Ajax學習筆記：
通過 jQuery AJAX 方法，您能夠使用 HTTP Get 和 HTTP Post 從遠端伺服器上請求文字、HTML、XML 或 JSON - 同時您能夠把這些外部資料直接載入網頁的被選元素中。【注意：get()方法不可以帶參，而post()方法可以在請求中帶參】前提：必須匯入jquery的支援！
一、jQuery $.post() 方法：
- ·語法:$.post(URL,data,callback);
- ·例如：
$("button").click(function(){ $.post("/try/ajax/demo_test_post.php", { name:"菜鳥教程", url:"http://www.runoob.com" }, function(data,status){ alert("資料: \n" + data + "\n狀態: " + status); }); });
- ·解析：
$.post() 的第一個引數是我們希望請求的 URL ("demo_test_post.php")。 然後我們連同請求（name 和 url）一起傳送資料。 "demo_test_post.php" 中的 PHP 指令碼讀取這些引數，對它們進行處理，然後返回結果。 第三個引數是回撥函式。第一個回撥引數存有被請求頁面的內容，而第二個引數存有請求的狀態。
（2）jQuery $.get() 方法：
- ·語法：
$.get(URL,callback);
- ·例如：
$("button").click(function(){ $.get("demo_test.php",function(data,status){ alert("資料: " + data + "\n狀態: " + status); }); });
- ·解析：
$.get() 的第一個引數是我們希望請求的 URL（"demo_test.php"）。 第二個引數是回撥函式。第一個回撥引數存有被請求頁面的內容，第二個回撥引數存有請求的狀態。（3） 這個PHP檔案 ("demo_test.php") 類似這樣： <?php echo '這是個從PHP檔案中讀取的資料。'; ?>（4）jQuery load() 方法：
- ·load() 方法從伺服器載入資料，並把返回的資料放入被選元素中。
- ·例如：$("#div1").load("demo_test.txt");
- ·解析：把檔案 "demo_test.txt" 的內容載入到指定的 <div> 元素中