`
zy116494718
  • 浏览: 476828 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery的ajax()实现异步传输List、Map

阅读更多

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

分享到:
评论

相关推荐

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

    本话题将深入探讨如何使用jQuery的Ajax功能实现异步传输List和Map类型的数据,同时涉及JSON数据格式的使用。 首先,让我们了解JSON(JavaScript Object Notation),它是轻量级的数据交换格式,易于人阅读和编写,...

    ajax和json跟java实现List、Map直接传递

    在Web开发中,Ajax(Asynchronous JavaScript and XML)和JSON(JavaScript Object Notation)是两种常用的技术,用于实现页面的异步数据交互和数据传输。Java作为后端服务器语言,常与它们配合处理数据,尤其是当...

    使用jQuery实现异步操作(包括异步提及form表单)Meet520.doc

    jQuery作为一个强大的JavaScript库,提供了简便的方法来实现异步操作,尤其是处理表单提交。本文将深入讲解如何使用jQuery实现异步操作,包括异步提交表单。 首先,异步操作的基础是AJAX(Asynchronous JavaScript ...

    jquery ajax 分页 局部刷新 mysql数据库

    首先,jQuery AJAX是JavaScript库jQuery提供的一种异步数据通信方式,它允许我们在不刷新整个页面的情况下与服务器进行交互。通过AJAX,我们可以发送请求到服务器,获取数据,并在客户端更新特定的部分。这对于分页...

    Echarts通过Ajax实现动态数据加载

    ### Echarts通过Ajax实现动态数据加载 #### 一、引言 在现代Web开发中,数据可视化是一项重要的技能。Echarts作为一款强大的JavaScript图表库,因其丰富的图表类型、灵活的配置选项以及良好的交互性而备受开发者...

    J2EE中JSONJquery_AJAX应用中文PDF版

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

    java对象List,Map转json格式

    本篇文章将深入探讨如何将Java中的List和Map对象转化为JSON格式,并涉及与AJAX交互的相关知识。 1. **Java JSON库**: 在Java中,我们可以使用多种库来实现对象到JSON的转换,如Jackson、Gson、Fastjson等。这里以...

    J2EE中JSON+Jquery_AJAX应用.pdf

    JSON+jQuery AJAX 在 J2EE 项目中的应用是现代 Web 开发中常见的一种技术组合,主要用来实现页面的动态加载和表单内容的异步提交,以提高用户体验和交互性能。下面将详细介绍这一技术的各个关键点。 1. **概述** ...

    J2EE中JSON+Jquery_AJAX应用[定义].pdf

    在J2EE开发中,JSON(JavaScript Object Notation)和JQuery_AJAX的结合使用是实现页面动态加载和异步数据交互的关键技术。JSON是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。JQuery_...

    jquery的异步

    在本例中,"jquery的异步"指的是jQuery如何处理异步数据请求,尤其是通过Ajax来实现与服务器的数据交互。异步操作在网页应用中非常重要,因为它允许在不刷新整个页面的情况下更新部分内容,提升用户体验。 描述中的...

    Struct2利用Ajax,JQuery交互Json

    在Web开发中,数据交互是不可或缺的一环,而Struct2、Ajax、JQuery以及Json的结合使用,可以实现高效、动态的前后端通信。这里我们将深入探讨这些技术及其在实际应用中的结合方式。 Struct2是一个基于Java的MVC...

    jQuery的Ajax接收java返回数据方法

    在Web开发中,前端与后端的交互是一个关键环节,jQuery的Ajax功能使得前端能够异步地从服务器获取数据,而无需刷新整个页面。本文主要介绍如何使用jQuery的Ajax方法来接收Java后端返回的数据。 首先,我们看前端的...

    struts+json+jquery练习小项目包括返回单个字符、对象、list、map

    通过使用$.ajax或$.getJSON等jQuery函数,你可以发起一个异步请求到服务器,获取JSON数据,然后利用JavaScript处理这些数据。 对于返回对象和列表的情况,Action类可能看起来像这样: ```java public class ...

    ajax实现分页

    而在实际应用中,Ajax技术因其能够实现局部刷新、异步加载等功能而被广泛应用于动态加载数据、更新页面等场景。下面将详细介绍如何在SSM(SpringMVC + Spring + MyBatis)框架中利用Ajax来实现自定义分页数据。 ###...

    ajax+json+Struts2实现list传递实例讲解.docx

    在本文中,我们将深入探讨如何使用Ajax、JSON和Struts2框架实现List数据的传递。这个实例主要用于在不刷新整个页面的情况下,通过Ajax从后台获取并显示一个包含多个ErrorCondition对象的List集合。 首先,JSON...

    struts2+ajax 发送jquery请求分页,返回josn对象,引用js自动解析

    这里我们探讨的是如何使用Struts2框架配合Ajax(基于jQuery库)发送请求来实现分页功能,并返回JSON对象进行自动解析。 首先,我们需要理解Struts2框架。Struts2是一个基于MVC设计模式的Java Web框架,它提供了处理...

Global site tag (gtag.js) - Google Analytics