ajax 与jsp servlet

 

jQuery的Ajax实现异步传输List、Map_GOOD

分类: JAVA WEB前端

由于项目需要通过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); 
}

原文地址:https://www.cnblogs.com/CooderIsCool/p/4815043.html