ajax 與jsp servlet

時間 2019-11-24

標籤 ajax jsp servlet 欄目 Ajax 简体版

原文原文鏈接

jQuery的Ajax實現異步傳輸List、Map_GOOD

分類： JAVA WEB前端2013-08-29 18:35 6296人閱讀評論(0) 收藏舉報

因爲項目須要經過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對象javascript

        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測試應該同樣,html

訪問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);
}
}

三、編寫客戶端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>

四、下載jquery.js文件
下載地址：http://docs.jquery.com/Downloading_jQuery
下載後，將文件拷貝到文件結構中

五、編寫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);
}前端