日期:2014-05-16  浏览次数:20435 次

java环境下使用jQuery进行JSON数据传送的交互过程
例解析java + jQuery + json工作过程(登录)
本文主要讲解在java环境下使用jQuery进行JSON数据传送的交互过程

参考根据作者的账务管理系统(个人版) 源码下载 讲解

一、相关技术、工具简介

1、简单介绍一下JSON,JSON是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。已键值对形式表示数据,和java中的Map的数据存储形式相似,具体细节请参考http://www.json.org/json-zh.html。

2、对应后台JSON的数据处理工具json-lib,包含各种格式数据的工具类,比如:JavaBean、数组、集合(Collection)等,参考API文档。

3、jQuery框架中的数据表现形式,如果你熟悉jQuery的话就会发现jQuery的使用的数据传输都是JSON格式,比如我们经常使用的$.ajax方法:

$.ajax({
        url : url,
        data : {
                id : chkValue
        },
        cache : false,
        dataType : "json",
        success : function(result){
                alert(result);
        }
);
其中 {…} 表示的就是JSON格式的数据

二、前台工作方式
为了能够容易理解以系统登录讲解,最后会以一个实例的方式讲解
1、登录页面
代码请参见 http://code.google.com/p/finance-p/source/browse/trunk/login.jsp

用户名:
<input id="loginName" name="loginName" size="20" type="text" />

密码:
<input id="password" name="password" size="20" type="password" />
2、登录javascript文件 login.js

/**
* 设置表单验证规则
*/
function regFormValidator() {
        $.formValidator.initConfig({formid:"loginForm"});
        $("#loginName").formValidator({
                onshow : "请输入用户名",
                onfocus : "用户名至少2个字,最多4个字"
        }).inputValidator({
                min : 1,
                onerror : "你输入的用户名非法,请确认"
        });

        $("#password").formValidator({
                onshow : "请输入密码"
        }).inputValidator({
                min : 6,
                onerror : "密码在6位以上,请确认"
        });
}

$(function() {
        // 注册表单验证插件
        regFormValidator();

        $('#submit').click(function(){
                // 验证输入的用户名、密码是否正确
                var valid = jQuery.formValidator.pageIsValid('1');
                if (valid) {
                        $(this).attr('value', '正在登录……').attr('disabled', true);
                } else {