`

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

AjaxjQueryjsonServletApache 
阅读更多
由于项目需要通过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源代码如下：

view plaincopy to clipboardprint?
01.package ajax.servlet; 
02.import java.io.IOException; 
03.import java.io.PrintWriter; 
04.import javax.servlet.ServletException; 
05.import javax.servlet.http.HttpServlet; 
06.import javax.servlet.http.HttpServletRequest; 
07.import javax.servlet.http.HttpServletResponse; 
08./**
09. * 
10. * @author Thinkpad
11. *
12. */
13.public class CheckServlet extends HttpServlet { 
14.    public void doGet(HttpServletRequest request, HttpServletResponse response) 
15.            throws ServletException, IOException { 
16.        response.setContentType("text/html"); 
17.        response.setCharacterEncoding("UTF-8"); 
18.        PrintWriter out = response.getWriter(); 
19.         
20.        String name = request.getParameter("username"); 
21.        out.print("我是服务器，收到客户端的数据:"+name); 
22.        out.flush(); 
23.        out.close(); 
24.    } 
25.    public void doPost(HttpServletRequest request, HttpServletResponse response) 
26.            throws ServletException, IOException { 
27.        this.doGet(request, response); 
28.    } 
29.}
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文件源码如下：

view plaincopy to clipboardprint?
01.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
02.<html>
03.  <head>
04.    <title>ajax实现校验</title>
05.    <mce:script type="text/javascript" src="jslib/jquery.js" mce_src="jslib/jquery.js"></mce:script>
06.    <mce:script type="text/javascript" src="jslib/verify.js" mce_src="jslib/verify.js"></mce:script>
07.  </head>
08.   
09.  <body>
10.    <input type="text" id="username">
11.    <input type="button" value="校验" onclick="verify()" >
12.    <dir id="result"></dir>
13.  </body>
14.</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源代码如下：

view plaincopy to clipboardprint?
01.function verify() { 
02.    // 注解 
03.    // alert("点击了按钮"); 
04.    // jquery查询节点的方法 
05.    var jqueryObj = $("#username"); 
06.    // 获取文本框中用户输入的数据 
07.    var username = jqueryObj.val(); 
08.    // alert(username); 
09.    // 将数据发送给服务器的servlet 
10.    $.get("servlet/CheckServlet?username=" + username, null, callback); 
11.} 
12.// 回调函数 
13.function callback(data) { 
14.    // alert("收到服务器返回的数据"); 
15.    // alert(data); 
16.    var resultObj = $("#result"); 
17.    resultObj.html(data); 
18.}
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);
}
分享到：
| java对象怎么转json数组
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    J2EE中JSONJquery_AJAX应用中文PDF版

    主要是描述使用JSON JQuery_AJAX实现页面动态加载与页面表单数据的异步保存。首先页面通过调用JQuery_AJAX方法访问后台Action，在后台Action中将获取到的JavaBean、List、Map等数据类型转换为json-lib.ja 资源太大，...

    jquery-1.1.3 效率提高800%

    这是jQuery的低级AJAX实现。要查看高级抽象，见$.set、$.post等，这些方法更易于理解和使用。但是功能上有限制(例如，没有错误处理函数)。 警告：如果数据类型指定为"script"，那么POST自动转化为GET方法。...

    java面试宝典

    166、如何用JQuery进行表单验证？ 39 167、Prototype如何实现页面局部定时刷新？ 40 168、Prototype如何为一个Ajax添加一个参数？ 40 169、Ajax请求总共有多少种Callback? 41 170、Javascript如何发送一个Ajax请求？...

    Java面试宝典2020修订版V1.0.1.doc

    三、JavaScript/JQuery/Ajax部分 24 1、用js和jQuery怎么进行表单验证 24 3、列举javaScript的3种主要数据类型，2种复合数据类型和2种特殊数据类型。 24 4、谈谈你的JS的理解？ 24 5、ajax的优点？ 25 6、简述一下...

    python入门到高级全栈工程师培训 第3期 附课件代码

    09 传输层和应用层 第2章 01 上节课复习 02 arp协议复习 03 字符编码 第3章 01 网络基础和dos命令 02 为何学习linux 03 课程内容介绍 04 操作系统内核与系统调用 05 操作系统安装原理 06 linux操作系统安装 07 ...

    java面试题

    24. List, Set, Map区别 14 25. 集合类都有哪些？主要方法？ 14 26. 简述逻辑操作(&,|,^)与条件操作(&&,||)的区别。 14 27. XML文档定义有几种形式？它们之间有何本质区别？解析XML文档有哪几种方式？ 14 28. JSP和...

    千方百计笔试题大全

    166、如何用JQuery进行表单验证？ 39 167、Prototype如何实现页面局部定时刷新？ 40 168、Prototype如何为一个Ajax添加一个参数？ 40 169、Ajax请求总共有多少种Callback? 41 170、Javascript如何发送一个Ajax请求？...

    Java学习笔记-个人整理的

    {4.15}Map的迭代}{90}{section.4.15} {4.15.1}字符统计}{91}{subsection.4.15.1} {5}格式化输入输出}{94}{chapter.5} {5.1}时间与日期}{94}{section.5.1} {5.1.1}各类时间日期转换}{94}{subsection.5.1.1} {...

Magicbox
Global site tag (gtag.js) - Google Analytics