如今来说，AJAX在现在是热得不能再热的技术。没有人能否认，它拥有大批的支持者。在CNN上，...
JavaScript技能的不足致使很长一段时间对于前端交互处理望而却步，看着编程语言TOP排行榜JavaScript的热度，加上好多网站的用户体验越来越如心，这些都离不开JavaScript。
说白了，开发人员之所以多年冷落JavaScript，终究是没能驾驭了JavaScript。但是，逃避总不是办法，开发出交互很差劲的网站，后台处理在牛逼，也没法吸引用户。随着互联网和Web2.0的发展，网上冲浪再也不是简单的获取资讯，信息，更多融入了个人情感，自媒体，社区化，群体的元素，而这些元素的融入自然少不了更加人性化的交互服务。
说了这些，多源自越来越多很好体现效果的网站的诞生。
言归正传，下面的例子是一个简单的数据操作，完全是通过Ajax完成。
1.数据库表结构：
2.实体类：Account(参见数据库表结构)
3.数据源获取类（JDBC）
4.数据库操作CRUD
5.处理Ajax的请求的服务类ActionServlet
jQuery提供的Ajax函数如下：
$.ajax(options)是jQuery中Ajax的最底层实现，下面这个例子采用此方法完成。
-
测试页面
-
代码：
页面代码：
123456789101112131415161718192021222324252627282930313233343536373839404142姓名：
心情：
编号：网址：请稍等，数据正在加载...说明：使用Ajax来处理，移除表单标签，提交按钮等元素。
-
Ajax处理：
实现添加信息，查询所有信息，删除指定编号信息，更新指定编号信息，查询指定编号信息。
-
代码：
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142$(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 = $("");title.html("|编号|姓名|心情|发布时间|");title.appendTo(divNode);$.each(o, function(i, n) {var div = $("");var span = "|"$.each(n, function(pro, val) {span = span + "" + val + "|";})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 = $("");title.html("|编号|姓名|心情|发布时间|");title.appendTo(divNode);$.each(o, function(i, n) {var div = $("");var span = "|";$.each(n, function(pro, val) {span = span + "" + val + "|";})div.html(span).appendTo(divNode);})divNode.show();} else {$("#msg").html("没有数据信息");}}});}说明:Ajax提交的URL是对应的处理业务的Servlet程。
-
Servlet程序代码：
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116package 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")) {ListaccountList = 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();}}
-
下面是测试的效果图：
至此：jQuery的Ajax底层实现操作实现了无刷新的数据库CRUD操作，整个过程在一个HTML页面中完成。
-
jQuery提供的$.get(),$.post()，load()方法是在$.ajax()的基础上进行封装，如果将$.ajax（）定为第一层，那么这些方法就是第二层，$.getScript()和$.getJSON()方法就是第三层。
由于上面贴了写代码，写的有些长了
您正在访问的是 百搜技术!希望百搜技术能协助您解决问题。如需提问,请移步 百搜论坛(http://bbs.baisoujs.com)进行提问!
本文网址： http://www.baisoujs.com/detail_138132539025715.html