`

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数组
评论
发表评论

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

相关推荐

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

    J2EE中JSON+Jquery_AJAX应用(1)

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

    jquery的异步

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

    J2EE中JSON+Jquery_AJAX应用

    2.2 JSON格式化数据（主要是方便JS操纵数据） ### 2.2.1 JSON可以格式化的...通过以上步骤，我们可以看到如何在J2EE项目中利用JSON和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框架，它提供了处理...

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