JavaScript技能的不足致使很長一段時間對於前端互動處理望而卻步，看著程式設計語言TOP熱門排行榜JavaScript的熱度，加上好多網站的使用者體驗越來越如心，這些都離不開JavaScript。
說白了，開發人員之所以多年冷落JavaScript，終究是沒能駕馭了JavaScript。但是，逃避總不是辦法，開發出互動很差勁的網站，幕後處理在牛逼，也沒法吸引使用者。隨著互連網和Web2.0的發展，網上衝浪再也不是簡單的擷取資訊，資訊，更多融入了個人情感，自媒體，社區化，群體的元素，而這些元素的融入自然少不了更加人性化的互動服務。
說了這些，多源自越來越多很好體現效果的網站的誕生。
言歸正傳，下面的例子是一個簡單的資料操作，完全是通過Ajax完成。
1.資料庫表結構：
650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/111301B31-0.png" title="Account.png" alt="161635128.png" />
2.實體類：Account(參見資料庫表結構)
3.資料來源擷取類JDBC）
4.資料庫操作CRUD
5.處理Ajax的請求的服務類ActionServlet
jQuery提供的Ajax函數如下：
650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/111301AQ-1.png" title="jqueryAjaxMethod.png" alt="162119760.png" />
$.ajax(options)是jQuery中Ajax的最底層實現，下面這個例子採用此方法完成。
測試頁面
650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/1113013053-2.png" title="Page.png" alt="162339804.png" />
代碼：
頁面代碼：
<body> <center> <div> <div> <label id="l_a_name">姓名：</label> <input type="text" id="a_name" name="a_name" /><br /> <label id="l_a_feeling">心情：</label><br /> <textarea rows="10" cols="30" id="a_feeling" name="a_feeling"></textarea> <div> <label id="msg"></label> </div> </div> <div> <span> <button id="show" name="show" value="show" <span><button id="add" name="add" value="add" <span> <label id="l_a_id">編號：</label><input type="text" id="a_id" name="a_id" /> <button id="update" name="update" value="update" </span> <span> <button id="del" name="del" value="delete" </span> <span> <button id="query" name="query" value="query" </span> </div> <div> <span id="v_a_id"></span> <span id="v_a_name"></span> <span id="v_a_feeling"></span> <span id="v_a_time"></span> </div> <div id="divs" align="center"></div> </div> </center> <div> 網址：<input type="text" id="url" name="url" /> <input type="button" id="get" value="載入" /> <div id="urlcontent"></div> </div> <div> <input id="wether" type="button" value="擷取JSON資料" /> <div id="loadMsg">請稍等，資料正在載入...</div> <div id="imageDiv"></div> </div></body>
說明：使用Ajax來處理，移除表單標籤，提交按鈕等元素。
Ajax處理：
實現添加資訊，查詢所有資訊，刪除指定編號資訊，更新指定編號資訊，查詢指定編號資訊。
代碼：
$(document).ready(function() { $("#divs").hide(); $("#urlcontent").hide(); $("#loadMsg").hide(); }) function show() { $.ajax({ global:true, type : 'post', url : "control", data : { method : 'show', }, success : function(data) { var divNode = $("#divs"); divNode.html(""); if (data != "null") { var o = eval("(" + data + ")"); var title = $("<div>"); title .html("|<span>編號</span>|<span>姓名</span>|<span>心情</span>|<span>發布時間</span>|"); title.appendTo(divNode); $.each(o, function(i, n) { var div = $("<div>"); var span = "|" $.each(n, function(pro, val) { span = span + "<span>" + val + "</span>|"; }) div.html(span).appendTo(divNode); }) divNode.show(); } else { $("#msg").html("沒有資料資訊"); } } }); } function add() { $("#divs").hide(); var a_name = $("#a_name").val(); var a_feeling = $("#a_feeling").val(); if (a_name == "" || a_feeling == "") { alert("輸入資訊不可為空！"); return; } $.ajax({ type : 'post', url : "control", data : { method : 'add', a_name : a_name, a_feeling : a_feeling }, success : function(data) { $("#msg").html(data); $("#v_a_name").html(a_name); $("#v_a_feeling").html(a_feeling); } }); } function update() { $("#divs").hide(); var a_id = $("#a_id").val(); var a_name = $("#a_name").val(); var a_feeling = $("#a_feeling").val(); if (a_id == "" && a_name == "" && a_feeling == "") { alert("輸入編號或者資訊不可為空！"); return; } $.ajax({ type : 'post', url : "control", data : { method : 'update', a_name : a_name, a_feeling : a_feeling, a_id : a_id }, success : function(data) { $("#msg").html(data); $("#v_a_id").html(a_id); $("#v_a_name").html(a_name); $("#v_a_feeling").html(a_feeling); } }); } function del() { $("#divs").hide(); var a_id = $("#a_id").val(); if (a_id == "") { alert("輸入編號不可為空！"); return; } $.ajax({ type : 'post', url : "control", data : { method : 'delete', a_id : a_id }, success : function(data) { $("#msg").html(data); } }); } function query() { var a_id = $("#a_id").val(); if (a_id == "") { alert("輸入編號不可為空！"); return; } $.ajax({ type : 'post', url : "control", data : { method : 'query', a_id : a_id }, success : function(data) { var divNode = $("#divs"); divNode.html(""); if (data != "null") { var o = eval("(" + data + ")"); var title = $("<div>"); title .html("|<span>編號</span>|<span>姓名</span>|<span>心情</span>|<span>發布時間</span>|"); title.appendTo(divNode); $.each(o, function(i, n) { var div = $("<div>"); var span = "|"; $.each(n, function(pro, val) { span = span + "<span>" + val + "</span>|"; }) div.html(span).appendTo(divNode); }) divNode.show(); } else { $("#msg").html("沒有資料資訊"); } } }); }說明:Ajax提交的URL是對應的處理業務的Servlet程。
Servlet程式碼：
package com.ajax.test;import java.io.IOException;import java.util.Calendar;import java.util.Date;import java.util.List;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;@WebServlet("/ActionServlet")public class ActionServlet extends HttpServlet { private static final long serialVersionUID = 1L; private DAO dao = new DAO(); private Account account; public ActionServlet() { super(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("UTF-8"); String method = request.getParameter("method"); if (method.equals("add")) { String a_name = request.getParameter("a_name"); String a_feeling = request.getParameter("a_feeling"); Date a_time = Calendar.getInstance().getTime(); account = new Account(); account.setA_name(a_name); account.setA_feeling(a_feeling); account.setA_time(a_time); int result = dao.add(account); if (result == 1) { response.getWriter().print(a_time + " " + a_name + " 發布資訊成功！"); } else { response.getWriter().print(a_time + " " + a_name + " 發布資訊失敗！"); } } if (method.equals("delete")) { int a_id = Integer.parseInt(request.getParameter("a_id")); account = new Account(); account.setA_id(a_id); int result = dao.delete(account); if (result == 1) { response.getWriter().print("刪除資訊成功！"); } else { response.getWriter().print("刪除資訊失敗！"); } } if (method.equals("update")) { int a_id = Integer.parseInt(request.getParameter("a_id")); String a_name = request.getParameter("a_name"); String a_feeling = request.getParameter("a_feeling"); Date a_time = Calendar.getInstance().getTime(); account = new Account(); account.setA_id(a_id); account.setA_name(a_name); account.setA_feeling(a_feeling); account.setA_time(a_time); int result = dao.update(account); if (result == 1) { response.getWriter().print(a_time + " " + a_name + " 更新資訊成功！"); } else { response.getWriter().print(a_time + " " + a_name + " 更新資訊失敗！"); } } if (method.equals("query")) { int a_id = Integer.parseInt(request.getParameter("a_id")); Account account = dao.queryById(a_id); if (account != null) { String json = objctToJson(account); StringBuilder sb=new StringBuilder(); sb.append("{'1':"); sb.append(json); sb.append("}"); response.getWriter().print(sb.toString()); } else { response.getWriter().print("null"); } } if (method.equals("show")) { List<Account> accountList = dao.query(); StringBuilder sb = new StringBuilder(); sb.append("{"); for (int i = 0, j = accountList.size(); i < j; i++) { Account account = accountList.get(i); sb.append(i); sb.append(":"); sb.append(objctToJson(account)); if (i != j - 1) { sb.append(","); } } sb.append("}"); response.getWriter().print(sb.toString()); } } /** * 將對象資訊轉換為JSON格式的資料 * @param account * @return */ private String objctToJson(Account account) { StringBuilder sb = new StringBuilder(); sb.append("{"); sb.append("'a_id':'" + account.getA_id() + "',"); sb.append("'a_name':'" + account.getA_name() + "',"); sb.append("'a_feeling':'" + account.getA_feeling() + "',"); sb.append("'a_time':'" + account.getA_time() + "'"); sb.append("}"); return sb.toString(); }}下面是測試的：
650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/111301K14-3.png" style="float:none;" title="野馬紅塵" alt="163908535.png" />
650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/1113012564-4.png" style="float:none;" title="野馬紅塵" alt="163909105.png" />
至此：jQuery的Ajax底層實現操作實現了無重新整理的資料庫CRUD操作，整個過程在一個HTML頁面中完成。
jQuery提供的$.get(),$.post()，load()方法是在$.ajax()的基礎上進行封裝，如果將$.ajax）定為第一層，那麼這些方法就是第二層，$.getScript()和$.getJSON()方法就是第三層。
由於上面貼了寫代碼，寫的有些長了，關於第三層的例子參見第二篇：http://aiilive.blog.51cto.com/1925756/1304356
本文出自 “野馬紅塵” 部落格，謝絕轉載！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
