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();})functionshow() {$.ajax({global:true,type :'post',url :"control",data : {method :'show',},success :function(data) {vardivNode = $("#divs");divNode.html("");if(data !="null") {varo = eval("("+ data +")");vartitle = $("");title.html("|编号|姓名|心情|发布时间|");title.appendTo(divNode);$.each(o,function(i,n) {vardiv = $("");varspan ="|"$.each(n,function(pro,val) {span = span +""+ val +"|";})div.html(span).appendTo(divNode);})divNode.show();}else{$("#msg").html("没有数据信息");}}});}functionadd() {$("#divs").hide();vara_name = $("#a_name").val();vara_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);}});}functionupdate() {$("#divs").hide();vara_id = $("#a_id").val();vara_name = $("#a_name").val();vara_feeling = $("#a_feeling").val();if(a_id ==""&& a_name ==""&& a_feeling =="") {alert("输入编号或者信息不能为空！");return;}$.ajax({type :'post',data : {method :'update',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);}});}functiondel() {$("#divs").hide();vara_id = $("#a_id").val();if(a_id =="") {alert("输入编号不能为空！");return;}$.ajax({type :'post',data : {method :'delete',success :function(data) {$("#msg").html(data);}});}functionquery() {vara_id = $("#a_id").val();if(a_id =="") {alert("输入编号不能为空！");return;}$.ajax({type :'post',data : {method :'query',success :function(data) {vardivNode = $("#divs");divNode.html("");if(data !="null") {varo = eval("("+ data +")");vartitle = $("");title.html("|编号|姓名|心情|发布时间|");title.appendTo(divNode);$.each(o,n) {vardiv = $("");varspan ="|";$.each(n,val) {span = span +""+ val +"|";})div.html(span).appendTo(divNode);})divNode.show();}else{$("#msg").html("没有数据信息");}}});}说明:Ajax提交的URL是对应的处理业务的Servlet程。
-
Servlet程序代码：
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116packagecom.ajax.test;importjava.io.IOException;importjava.util.Calendar;importjava.util.Date;importjava.util.List;importjavax.servlet.ServletException;importjavax.servlet.annotation.WebServlet;importjavax.servlet.http.HttpServlet;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;@WebServlet("/ActionServlet")publicclassActionServletextendsHttpServlet {privatestaticfinallongserialVersionUID = 1L;privateDAO dao =newDAO();privateAccount account;publicActionServlet() {super();}protectedvoiddoGet(HttpServletRequest request,HttpServletResponse response)throwsServletException,IOException {doPost(request,response);}protectedvoiddoPost(HttpServletRequest request,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 =newAccount();account.setA_name(a_name);account.setA_feeling(a_feeling);account.setA_time(a_time);intresult = 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")) {inta_id = Integer.parseInt(request.getParameter("a_id"));account =newAccount();account.setA_id(a_id);intresult = dao.delete(account);if(result ==1) {response.getWriter().print("删除信息成功！");}else{response.getWriter().print("删除信息失败！");}}if(method.equals("update")) {inta_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 =newAccount();account.setA_id(a_id);account.setA_name(a_name);account.setA_feeling(a_feeling);account.setA_time(a_time);intresult = 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")) {inta_id = Integer.parseInt(request.getParameter("a_id"));Account account = dao.queryById(a_id);if(account !=null) {String json = objctToJson(account);StringBuilder sb=newStringBuilder();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 =newStringBuilder();sb.append("{");for(inti =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*/privateString objctToJson(Account account) {StringBuilder sb =newStringBuilder();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("}");returnsb.toString();}}
-
下面是测试的效果图：
-
jQuery提供的$.get(),$.post()，load()方法是在$.ajax()的基础上进行封装，如果将$.ajax（）定为第一层，那么这些方法就是第二层，$.getScript()和$.getJSON()方法就是第三层。
由于上面贴了写代码，写的有些长了
您正在访问的是 百搜技术!希望百搜技术能协助您解决问题。如需提问,请移步 百搜论坛(http://bbs.baisoujs.com)进行提问!
