使用Jquery–Jsp與servlet之間的資料互動

有過java web開發經驗的人都知道，Jsp與servlet之間的資料互動多種多樣，但最常見的莫過於表單提交咯(這裡我沒說錯吧— ,—),通過jsp標籤form的action指定你要發送表單資料的目的地，在指定發送的方式(get或者post),點擊提交按鈕，而在servlet端使用request.getParameter(key)接收，這樣就可以達到jsp與servlet之間的資料互動。而我今天要說的方法是通過Jquery的的ajax部分來進行與servlet互動。

瞭解jquery的人都知道，jquery本身就是一個javascript的輕量級架構，可以說是對javascript的一個很好的封裝，其中最為精妙的莫過於對ajax操作的簡化咯。。。簡單，易上手。如果非要挑點毛病的話，我想只有一點吧(應該吧。。。。)：那就是不利於初學者的學習，因為jquery把這部分簡化的太過於簡單咯，對於初學者想瞭解其內部實現根本無從下手，讓初學者只知道這樣去做，但不知道為什麼這樣做。好了，廢話不多說了，上正題吧。

jquery對於ajax的操作主要體現與幾種方法：$.get(),$.post(),$.ajax().其中$.ajax()最難理解，也最難使用。而至於其他的方法大家可以去W3C或者通過其他的渠道瞭解，在這裡我就不贅述咯(其實是我想偷懶。。。，交代的那麼坦誠，估計沒人噴了吧)~~~好了，來先說第一個$.get()。

$.get()其實功能跟使用form表單提交時，方式選擇get傳輸是一樣的。而它裡面有幾個參數：

url	必需。規定將請求發送的哪個 URL。
data	可選。規定連同請求發送到伺服器的資料。
success(response,status,xhr)	可選。規定當請求成功時啟動並執行函數。 額外的參數： response - 包含來自請求的結果資料 status - 包含請求的狀態 xhr - 包含 XMLHttpRequest 對象
dataType	可選。規定預計的伺服器響應的資料類型。 預設地，jQuery 將智能判斷。 可能的類型： "xml" "html" "text" "script" "json" "jsonp"

他的使用方法，eg:

$.get("demo_ajax_load.txt", function(result){    $("div").html(result);  });

而$.post()的用法跟get的用法大同小異，沒多大的區別

文法

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

參數	描述
url	必需。規定把請求發送到哪個 URL。
data	可選。映射或字串值。規定連同請求發送到伺服器的資料。
success(data, textStatus, jqXHR)	可選。請求成功時執行的回呼函數。
dataType	可選。規定預期的伺服器響應的資料類型。 預設執行智能判斷（xml、json、script 或 html）。

使用執行個體：

$.post("demo_ajax_gethint.asp",{suggest:txt},function(result){    $("span").html(result);  });

要了，接下來重點我們介紹$.ajax()這個方法，前面的兩個方法可以說是從這個方法進行延伸的，將其進行簡化，演變出來的。下面我們同樣的先來看一下$.ajax()的文法、參數。

文法

jQuery.ajax([settings])

參數	描述
settings	可選。用於配置 Ajax 請求的索引值對集合。 可以通過 $.ajaxSetup() 設定任何選項的預設值。

運用執行個體：

$.ajax({ url: "test.html", context: document.body, success: function(){        $(this).addClass("done");      }});

至於更加詳細的參數資訊大家可以點擊此連結進行預讀：http://www.w3school.com.cn/jquery/ajax_ajax.asp或者我在接下面的代碼中進行部分的講解。

好了，例如我有個jsp檔案SearchVender.jsp。裡面有幾個輸入框：

<div class="registerinput" style="display: none;margin-top: 40px;">  <form style="margin-right: 50px;text-align: right;">  <label style="font-size: 1em">名稱</label><input type="text" name="registername" title="請輸入你的真實姓名"><br>  <label style="font-size: 1em">郵箱</label><input type="text" name="registeremail" title="請輸入郵箱地址，格式:xxx@xxx.com/cn"><br>  <label style="font-size: 1em">密碼</label><input type="password" name="registerpassword" title="請輸入密碼，密碼內不能有非法字母，eg:#、$、&..."><br>  <label style="font-size: 1em">連絡人</label><input type="text" name="registerconnect" title="請輸入連絡人名字"><br>  <label style="font-size: 1em">聯絡電話</label><input type="text" name="registerphone" title="請輸入連絡人的電話號碼"><br>  <label style="font-size: 1em">地址</label><input type="text" name="registeraddress" title="請輸入你目前的居住地址"><br>  <label style="font-size: 1em">郵編</label><input type="text" name="registerpost" title="請輸入你目前的居住地址的郵編">  </form>  <!--<input type="button" name="yes" value="確定" style="margin-top: 30px;">-->  </div>

同時又有個點擊的按鈕button

而我在script中的代碼，當我點擊按鈕時

function usertoregister(){var name=$("input[name='registername']").val().trim();var email=$("input[name='registeremail']").val().trim();var password=$("input[name='registerpassword']").val().trim();var connect=$("input[name='registerconnect']").val().trim();var phone=$("input[name='registerphone']").val().trim();var address=$("input[name='registeraddress']").val().trim();var post=$("input[name='registerpost']").val().trim();var obj=new registerobj(name,password,email,connect,phone,address,post);var jsonstring=JSON.stringify(obj);$.ajax({type:"POST",url:"SearchVenderRegisterServlet",async:false,data:jsonstring+"\n",success:function(data,textStatus){if(textStatus=="success"){alert(data);$("#loginorregister").dialog("close");}}});}

就會調用usertoregister()這個方法，此方法先擷取各個輸入框內的值

var name=$("input[name='registername']").val().trim();var email=$("input[name='registeremail']").val().trim();var password=$("input[name='registerpassword']").val().trim();var connect=$("input[name='registerconnect']").val().trim();var phone=$("input[name='registerphone']").val().trim();var address=$("input[name='registeraddress']").val().trim();var post=$("input[name='registerpost']").val().trim();

然後產生一個javascript對象

var obj=new registerobj(name,password,email,connect,phone,address,post);

當然，此對象你也得在javascript內聲明

function registerobj(name,password,email,connect,phone,address,post){    this.name=name;    this.password=password;    this.email=email;    this.connect=connect;    this.phone=phone;    this.address=address;    this.post=post;    }

然後我們將javascript對象轉換成json字串

var jsonstring=JSON.stringify(obj);

接下來就要用到今天的主角，$.ajax（）咯，

$.ajax({type:"POST",url:"SearchVenderRegisterServlet",async:false,data:jsonstring+"\n",success:function(data,textStatus){if(textStatus=="success"){alert(data);$("#loginorregister").dialog("close");}}});

這部分的代碼中的參數含義是：

type指明發送資料以什麼方式進行發送，有兩種方法：get和post兩種方法，假如我們不聲明的話，系統會自動的幫我們判斷的。

async:false,

則是聲明該請求時非同步還是同步的，true代表非同步，false代表同步，預設為true。

data:jsonstring+"\n",

你要傳輸的資料

success:function(data,textStatus){if(textStatus=="success"){alert(data);$("#loginorregister").dialog("close");}}

當請求成功時執行的函數，其中data代表返回的資料，textStatus代表返回的狀態："success"、"fail"

要了jsp端的代碼已經看完了，接下來我們來看一下servlet端的代碼

public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/html");response.setCharacterEncoding("utf-8");PrintWriter out = response.getWriter();String json=getJsonString(request);System.out.println(json);JSONObject jsonObject=JSONObject.fromObject(json);User user=(User) JSONObject.toBean(jsonObject, User.class);System.out.println("username:"+user.getName());out.write("success");out.flush();out.close();}protected String getJsonString(HttpServletRequest request){StringBuffer json=new StringBuffer();try {String line=null;BufferedReader reader = request.getReader();while((line=reader.readLine())!=null){json.append(line);}} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}return json.toString();}

再次過程中我們需要匯入JSON的jar包和其輔助包，至於有需要的人可以到我的資源下載
我已經上傳上去了，其他的代碼我也沒什麼好說的，只是一些簡單的流操作，主要的是這兩句

JSONObject jsonObject=JSONObject.fromObject(json);User user=(User) JSONObject.toBean(jsonObject, User.class);

頭一句的作用是將一個json字串轉換成一個json對象，第二句則是將一個json對象轉換成一個java對象。當然，毫無疑問的，我們同樣的也必須要一個對應的java對象。

public class User {private String name=null;private String password=null;private String email=null;private String connect=null;private String phone=null;private String address=null;private String post=null;public User(String name, String password, String email, String connect,String phone, String address, String post) {this.name = name;this.password = password;this.email = email;this.connect = connect;this.phone = phone;this.address = address;this.post = post;}public User() {}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}public String getEmail() {return email;}public void setEmail(String email) {this.email = email;}public String getConnect() {return connect;}public void setConnect(String connect) {this.connect = connect;}public String getPhone() {return phone;}public void setPhone(String phone) {this.phone = phone;}public String getAddress() {return address;}public void setAddress(String address) {this.address = address;}public String getPost() {return post;}public void setPost(String post) {this.post = post;}}

好了，全部代碼就已經結束咯~~~呵呵呵呵呵呵呵呵呵。。。飄過，睡去咯。。。。