標籤：
jQuery的Ajax實現非同步傳輸List、Map_GOOD分類： JAVA WEB前端2013-08-29 18:35 6296人閱讀 評論(0) 收藏 舉報javajquerylistjson由於項目需要通過ajax得到背景List對象裡面的值，由於沒有接觸過json所以前期我只能先傳字串再在js裡截取子串實現。閑暇時間摸索了一下關於json接受List對象的方法，步驟如下：
1.首先下載json所以依賴的包， Json-lib 最新版 json-lib-2.3-jdk15.jar，其官方網站是：http://json-lib.sourceforge.net/可以直接 download，細心的你會發現其網站頁面裡面有提示它還需要其他包：
Json-lib requires (at least) the following dependencies in your classpath:
jakarta commons-lang 2.4
jakarta commons-beanutils 1.7.0
jakarta commons-collections 3.2
jakarta commons-logging 1.1.1
ezmorph 1.0.6
其中一般項目中都會有前4個，所以只需要下載ezmorph 1.0.6 就可以了
分別是：
http://commons.apache.org/lang/
http://commons.apache.org/beanutils/
http://commons.apache.org/collections/
http://commons.apache.org/logging/
http://ezmorph.sourceforge.net/
2.首先先見一個小web項目
先建一個User類：
package com.json;
public class User {
String username;
String password;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
再建一個servlet
package com.json;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
public class TestJson extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request,response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
String str= request.getParameter("name");//得到ajax傳遞過來的paramater
System.out.print(str);
PrintWriter out = response.getWriter();
List list = new ArrayList();//傳遞List
Map m=new HashMap();//傳遞Map
User u1=new User();
u1.setUsername("zah");
u1.setPassword("123");
User u2=new User();
u2.setUsername("ztf");
u2.setPassword("456");
list.add(u1); //添加User對象
list.add(u2); //添加User對象
m.put("u1", u1);
m.put("u2", u2);
JSONArray jsonArray2 = JSONArray.fromObject( list );//轉化成json對象
JSONObject jo=JSONObject.fromObject(m);//轉化Map對象
out.print(jsonArray2);//返給ajax請求
out.print(jo);//返給ajax請求
}
}
配置好web.xml中的servlet映射，這一步就略了。
3.建立ajax實現
這裡為了快速實現用的是jquery實現的。
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function test(){
$.ajax({
type:"POST", //請求方式
url:"testjson", //請求路徑
cache: false,
data:"name=zah", //傳參
dataType: ‘json‘, //傳回值類型
success:function(json){
alert(json[0].username+" "+ json[0].password); //彈出返回過來的List對象
}
});
}
</script>
</head>
<body>
<input type="button" name="b" value="測試" onclick=test()>
</body>
測試開始，點擊按鈕彈出zah 123
json[0]就相當於u1對象 json[1]相當於u2對象，對於其屬性的訪問跟java對象一樣，其他的Connection測試應該一樣,
訪問Map的話直接把返回函數改成如下即可：
success:function(json){
alert(json.u1.username)
}
}直接跟上Key.屬性即可訪問Object對象。
文章出處：飛諾網(www.firnow.com):http://dev.firnow.com/course/4_webprogram/ajax/ajaxxl/20100721/476877.html
CheckServlet.java原始碼如下：
package ajax.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
*
* @author Thinkpad
*
*/
public class CheckServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
String name = request.getParameter("username");
out.print("我是伺服器，收到用戶端的資料:"+name);
out.flush();
out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}
3、編寫用戶端html檔案
建立ajax.html檔案
ajax.html檔案源碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ajax實現校正</title>
<mce:script type="text/javascript" src="jslib/jquery.js" mce_src="jslib/jquery.js"></mce:script>
<mce:script type="text/javascript" src="jslib/verify.js" mce_src="jslib/verify.js"></mce:script>
</head>
<body>
<input type="text" id="username">
<input type="button" value="校正" onclick="verify()" >
<dir id="result"></dir>
</body>
</html>
4、下載jquery.js檔案
：http://docs.jquery.com/Downloading_jQuery
下載後，將檔案拷貝到檔案結構中
5、編寫verify.js檔案
verify.js原始碼如下：
function verify() {
// 註解
// alert("點擊了按鈕");
// jquery查詢節點的方法
var jqueryObj = $("#username");
// 擷取文字框中使用者輸入的資料
var username = jqueryObj.val();
// alert(username);
// 將資料發送給伺服器的servlet
$.get("servlet/CheckServlet?username=" + username, null, callback);
}
// 回呼函數
function callback(data) {
// alert("收到伺服器返回的資料");
// alert(data);
var resultObj = $("#result");
resultObj.html(data);
}
ajax 與jsp servlet
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
