`
zy116494718
  • 浏览: 473221 次
  • 性别: 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 ajax 分页 局部刷新 mysql数据库

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

    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_...

    J2EE中JSON+Jquery_AJAX应用(1)

    JSON+JQuery_AJAX 技术在J2EE中的应用是现代Web开发中的常见实践,主要用于实现页面的动态加载和表单内容的异步提交,从而提高用户体验,减轻服务器负担。下面我们将深入探讨这一技术的各个方面。 1. **概述** 在...

    Struct2利用Ajax,JQuery交互Json

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

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

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

    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框架,它提供了处理...

    Springboot中ajax实现动态绑定省市区

    在Spring Boot应用中,Ajax(Asynchronous JavaScript and XML)技术常用于实现页面的异步更新,提高用户体验。这里我们将探讨如何在Spring Boot中利用Ajax来动态绑定省市区数据,特别是从高德地图API获取这些数据。...

    Struts2JQueryJson

    例如,多级联动页面可能利用JQuery的AJAX功能异步加载数据,用户在选择一级分类后,二级分类会动态更新,这种交互增强了用户体验。 对于登陆验证页面,通常会有一个表单提交用户凭据,Struts2可以通过Action类接收...

    java实现的highcharts与ajax结合动态实时获取数据更新图表

    Ajax(异步JavaScript和XML)是一种在不刷新整个网页的情况下,与服务器交换数据并更新部分网页的技术。它通过XMLHttpRequest对象向服务器发送请求,获取数据,然后在客户端使用JavaScript处理这些数据,实现页面的...

    Ajax实现局部动态更新实例[参考].pdf

    在本文中,我们将深入探讨如何使用Ajax技术实现网页的局部动态更新。Ajax,即Asynchronous JavaScript and XML,是一种创建交互式网页应用的技术,允许在不重新加载整个页面的情况下与服务器交换数据并更新部分网页...

    jquery-1.1.3 效率提高800%

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

    Jquery+Struts2+JSON处理

    jQuery简化了原生JavaScript的AJAX(异步JavaScript和XML)调用。通过$.ajax()函数,我们可以轻松发送HTTP请求到服务器,获取数据并更新页面部分,而无需刷新整个页面。例如: ```javascript $.ajax({ url: '...

    JSON_ajax笔记2

    jQuery提供了$.ajax方法简化了AJAX操作,可以更直观地指定请求参数,如URL、请求类型、发送的数据等: ```javascript $.ajax({ url: "请求地址", type: "GET或POST", data: {"key": "value"}, // 发送给服务器...

Global site tag (gtag.js) - Google Analytics