一个例子探究jQuery的Ajax应用（一）
生活随笔
收集整理的這篇文章主要介紹了
一个例子探究jQuery的Ajax应用（一）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
JavaScript技能的不足致使很長一段時間對于前端交互處理望而卻步，看著編程語言TOP排行榜JavaScript的熱度，加上好多網(wǎng)站的用戶體驗越來越如心，這些都離不開JavaScript。
說白了，開發(fā)人員之所以多年冷落JavaScript，終究是沒能駕馭了JavaScript。但是，逃避總不是辦法，開發(fā)出交互很差勁的網(wǎng)站，后臺處理在牛逼，也沒法吸引用戶。隨著互聯(lián)網(wǎng)和Web2.0的發(fā)展，網(wǎng)上沖浪再也不是簡單的獲取資訊，信息，更多融入了個人情感，自媒體，社區(qū)化，群體的元素，而這些元素的融入自然少不了更加人性化的交互服務(wù)。
說了這些，多源自越來越多很好體現(xiàn)效果的網(wǎng)站的誕生。
言歸正傳，下面的例子是一個簡單的數(shù)據(jù)操作，完全是通過Ajax完成。
1.數(shù)據(jù)庫表結(jié)構(gòu)：
2.實體類：Account(參見數(shù)據(jù)庫表結(jié)構(gòu))
3.數(shù)據(jù)源獲取類（JDBC）
4.數(shù)據(jù)庫操作CRUD
5.處理Ajax的請求的服務(wù)類ActionServlet
jQuery提供的Ajax函數(shù)如下：
$.ajax(options)是jQuery中Ajax的最底層實現(xiàn)，下面這個例子采用此方法完成。
測試頁面
代碼：
頁面代碼：
<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>網(wǎng)址：<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數(shù)據(jù)" /><div id="loadMsg">請稍等，數(shù)據(jù)正在加載...</div><div id="imageDiv"></div></div> </body>說明：使用Ajax來處理，移除表單標(biāo)簽，提交按鈕等元素。
Ajax處理：
實現(xiàn)添加信息，查詢所有信息，刪除指定編號信息，更新指定編號信息，查詢指定編號信息。
代碼：
$(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>發(fā)布時間</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("沒有數(shù)據(jù)信息");}}});}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>發(fā)布時間</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("沒有數(shù)據(jù)信息");}}});}說明:Ajax提交的URL是對應(yīng)的處理業(yè)務(wù)的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 + " 發(fā)布信息成功！");} else {response.getWriter().print(a_time + " " + a_name + " 發(fā)布信息失敗！");}}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());}}/*** 將對象信息轉(zhuǎn)換為JSON格式的數(shù)據(jù)* @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();} }下面是測試的效果圖：
至此：jQuery的Ajax底層實現(xiàn)操作實現(xiàn)了無刷新的數(shù)據(jù)庫CRUD操作，整個過程在一個HTML頁面中完成。
jQuery提供的$.get(),$.post()，load()方法是在$.ajax()的基礎(chǔ)上進行封裝，如果將$.ajax（）定為第一層，那么這些方法就是第二層，$.getScript()和$.getJSON()方法就是第三層。
由于上面貼了寫代碼，寫的有些長了，關(guān)于第三層的例子參見第二篇：http://aiilive.blog.51cto.com/1925756/1304356
總結(jié)
以上是生活随笔為你收集整理的一个例子探究jQuery的Ajax应用（一）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SPFA做最短路
- 下一篇： 数据挖掘网上资料大全