AJAX越來越火了，作為一個WEB程序開發者要是不會這個感覺就要落伍，甚至有可能在求職的時候屢被淘汰。我也是一個WEB程序開發者，當然我也要 “隨波逐流”一把，不然飯碗不保??！
之前實現AJAX使用Javascript腳本一個一個敲出來的，很繁瑣。學習Jquery之后就感覺實現AJAX并不是那么的困難了，當然除了 Jquery框架外還有其它的優秀框架這里我就著重說下比較流行的Jquery。Jquery AJAX提交表單有兩種方式，一是url參數提交數據，二是form提交（和平常一樣在后臺可以獲取到Form表單的值）。在所要提交的表單中，如果元素很多的話建議用第二種方式進行提交，當然你要是想練練“打字水平”的話用第一種方式提交也未嘗不可，相信開發者都不想費白勁吧！
ajax技術帶給我們的是良好的用戶體驗，同時，使用jquery可以簡化開發，提高工作效率。
下面介紹一下大致的開發步驟。
本文使用的是 jquery-1.3.2.min.js開發工具。
新建兩個頁面:
1、show.jsp：調用ajax，將表單中的數據發送給ajax.jsp頁面。
2、ajax.jsp：獲取show.jsp頁面傳遞的表單數據，并返回結果。
兩個頁面的編碼格式要設置為GBK：
<%@ page contentType="text/html;charset=GBK"%>
show.jsp頁面的重點部分：
1、添加對 jquery-1.3.2.min.js 的引用：
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
2、設置表單的id，在調用ajax的方法時要用到。
<form id="ajaxFrm" >
3、設置一個div，用于顯示ajax.jsp頁面返回的結果
<div id="ajaxDiv"></div>
4、增加一個按鈕，用來調用ajax
<input type="button" onClick="doFind();" value="調用一下ajax" >
5、增加調用ajax的函數：
function doFind(){$.ajax({cache: false,type: "POST",url:"ajax.jsp", //把表單數據發送到ajax.jspdata:$('#ajaxFrm').serialize(), //要發送的是ajaxFrm表單中的數據async: false,error: function(request) {alert("發送請求失?。?);},success: function(data) {$("#ajaxDiv").html(data); //將返回的結果顯示到ajaxDiv中}});}ajax.jsp頁面的源代碼：
<%@ page contentType="text/html;charset=GBK"%><%String userName = request.getParameter("UserName");if(userName!=null){userName = new String(userName.getBytes("ISO-8859-1"), "utf-8");//解決亂碼的問題}String returnString = "";returnString="你好，" + userName;out.print(returnString);%>運行效果如下：
jquery ajax提交表單從action傳值到jsp
jsp頁面：
代碼如下:
var clientTel = $("#clientTel").val(); var activityId = $("#activityId").val(); $.ajax({ type : "post",//發送方式 url : "/arweb/reserve/saveCode.action",// 路徑 data : "clientTel="+clientTel+"&activityId="+activityId , success: function(text){$("#randomCode").val(text);}, error: function(text) {alert("對不起,用戶ID不存在,請輸入正確的用戶ID");} }); acion類：
代碼如下:
HttpServletResponse res = ServletActionContext.getResponse(); res.reset(); res.setContentType("text/html;charset=utf-8"); PrintWriter pw = res.getWriter(); pw.print(random); pw.flush(); pw.close(); pw.print(random);這里的random就是action要向jsp傳的值，在jsp中，success: function(text)這里的text就是接收從action傳過來的值。
新聞熱點
疑難解答
