实例解析java + jQuery + json工作过程(获取JSON数据)-阿里云开发者社区

开发者社区> 咖啡兔子> 正文

实例解析java + jQuery + json工作过程(获取JSON数据)

简介:
+关注继续查看

前天刚刚写的一篇关于《实例解析java + ajax(jQuery) + json工作过程(登录)》的文章引起了网友们的关注和好评,

自从本站的账务管理系统(个人版)开源 以后很多网友询问系统的实现方式,我一一解释……,为此今天写文章详细讲解系统功能的实现细节。

以本站的开源项目账务管理系统的“债务人”模块为例子讲解

一、效果预览

债务人详细页面效果预览

二、实现方式


基本思想就是绑定列表中的人员名称触发事件,获得当前人员的ID发送ajax请求到后台,后台根据ID查询详细信息,返回JSON数据结果至前台,前台通过对话框组件显示人员详细


1、绑定click事件到列表的人员名称 在项目中的iouser/js/iouser.js文件中有这样一个方法:


/**
 * 点击名称弹出详细
 */
function regShowDetail() {
    $("span[name=iouid]").unbind('click').bind('click', function(){
        showDetail($(this).parent().parent().find('input[name=chk]').val());
    });
}


通过regShowDetail绑定了点击人员时执行showDetail的事件,


$(this).parent().parent().find('input[name=chk]').val()
//上面这句话就是获得列表左侧的复选框的value值以便传送给后台


  • 下面介绍一下showDetail方法的功能实现:

 * 查看用户详细资料
 * @param {} userId 用户ID
 */
function showDetail(userId) {
    // 创建一个对话框组件
    var dialog = $.weeboxs.open('showDetail.html', {
        title: '正在加载用户信息……',
        contentType: 'ajax',
        width: 600,
        height: 350,
        animate: true,
        clickClose: false,
        type: 'wee',
        showOk: false,
        cancelBtnName: '关 闭',
        onopen: innerShowDetail
    });

    //内部函数,实现债务人详细信息的载入、设置值
    function innerShowDetail() {
        // 获得JSON格式的数据
        $.getJSON('load.do',{id : userId}, function(json) {
            // 根据key设置value
            for (key in json) {
                if(key == 'id'){
                    $('#detailDiv #' + key).val(json[key]);
                } else {
                    if(json[key] == ''){
                        // 没有值设置为空
                        $('#detailDiv #' + key).html('?');
                    } else if(key == 'sex'){
                        $('#detailDiv #' + key).html(json[key] == '0' ? '女' : '男');
                    } else if(key == 'group'){
                        if(json[key] != null) {
                            $('#detailDiv #' + key).html(json[key]['groupName']);
                        }
                    } else {
                        $('#detailDiv #' + key).html(json[key]);
                    }
                }
            }

            //设置对话框标题和内容
            $('#detailDiv').removeAttr('class');
            dialog.setTitle('查看人员[' + json['userName'] + ']详细资料');
            dialog.setContent($('#detailDiv').html());
        });
    }
}


  • showDetail方法首先打开一个对话框组件 加载一个静态的模板showDetail.html
    • 文件中的ID都是根据信息点命名的,这样便于通过ID设置值
  • 通过路径load.do 请求后台查询人员详细,后台处理类为net.yanhl.iouser.action.IOUserAction的loadUser()方法,代码请点击这里查看
    • 怎么查询一个POJO对象就介绍了,重点说明怎么返回JSON格式的数据
    • 这里还是使用java语言使用的JSON工具json-lib,关于json-lib的资料上篇文章也已介绍,这里不再重复;

      // 获取一个Iouser对象,包含债务人的信息
      Iouser user = (Iouser) getBaseManager().get(Iouser.class, iouserId);
      
      //使用json-lib工具把一个POJO对象解析为一个JSON格式数据
      JSONObject jsonObject = JSONObject.fromObject(user, config);
      
      //向前台发送结果集
      print(response, jsonObject.toString());


      最中返回的结果集如下:

      {
      "age" : 56,
      "companyAddress" : "32",
      "companyName" : "未知",
      "companyPhone" : "--",
      "companyZip" : "",
      "createDate" : null,
      "creatorId" : 1,
      "group" : {
      "childSize" : 0,
      "createDate" : {
      "date" : 27,
      "day" : 6,
      "hours" : 0,
      "minutes" : 0,
      "month" : 11,
      "nanos" : 0,
      "seconds" : 0,
      "time" : 1230307200000,
      "timezoneOffset" : -480,
      "year" : 108
      },
      "creatorId" : 1,
      "groupName" : "商务",
      "id" : 33,
      "orderNum" : 0,
      "remark" : ""
      },
      "homeAddress" : "香港九龙",
      "homePhone" : "",
      "homeZip" : "",
      "id" : 12,
      "mobilePhone" : "15856453456",
      "orderNum" : 0,
      "remark" : "香港富豪",
      "sex" : "1",
      "userName" : "李嘉诚"
      }


  • 前台获得了结果集之后就可以根据key获得value来设置详细页面的内容了,代码如下:

    for (key in json) {
        if(key == 'id'){
            $('#detailDiv #' + key).val(json[key]);
        } else {
            $('#detailDiv #' + key).val(json[key]);
        }
    }


    至此就是我们刚刚看到的效果了,是不是很简单O(∩_∩)O~

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用W“.NET技术”CF实现SOA面向服务编程——简单的WCF开发实例
  前面为大家介绍过WCF的特点,现在再讲解一下WCF基础概念。   在WCF里,各个Application之间的通信是由EndPoint来实现的,EndPoint是WCF实现通信的核心要素。一个WCF Service可由多个EndPoint集合组成,每个EndPoint只能有一种绑定,就是说EndPoint就是通信的入口,客户端和服务端通过 EndPoint交换信息。
691 0
让小程序在自有App中启动的技术来了:mPaaS小程序架构深度解析
mPaaS 小程序框架作为一款 App 通用框架,帮助开发者面向自身的 App 实现小程序投放。不止如此,小程序代码仅需撰写一次,便可多端投放至自有 App、支付宝、钉钉甚至其他小程序开放平台。
1785 0
IPerf——网络测试工具介绍与源码解析(2)
对于IPerf源码解析,我是基于2.0.5版本在Windows下执行的情况进行分析的,提倡开始先通过对源码的简单修改使其能够在本地编译器运行起来,这样可以打印输出一些中间信息,对于理解源码的逻辑,程序实现的过程能够起到事半功倍的效果。
955 0
MySQL---数据库从入门走向大神系列(十一)-Java获取数据库/结果集的元信息、将数据表写入excel表格
数据库的元信息: 首先介绍一下数据库的元信息(元数据): 元数据(Metadata)是关于数据的数据。 元数据是描述数据仓库内数据的结构和建立方法的数据。 存储的数据是什么类型,什么驱动等等,这些描述数据的数据,就是元数据! 准备: package cn.
1299 0
第10周-任务0-构造和析构函数的执行过程实例解析
【题目】阅读程序,先分析程序的执行结果,在上机时运行程序进行对照,再通过单步执行跟踪程序的运行,达到理解基类、派生类中构造函数、析构函数执行过程的目的。 程序如下: #include <iostream> using namespace std; class Part  //部件类 { public:     Part();     Part(int i);     ~
939 0
Java 的快速 JSON 解析器/生成器fastjson
Fastjson 是一个 Java 库,可用于将 Java 对象转换为它们的 JSON 表示。它还可用于将 JSON 字符串转换为等效的 Java 对象。Fastjson 可以处理任意 Java 对象,包括您没有源代码的预先存在的对象。
101 0
Java 使用轮询获取线程返回数据
本文目录 1. 多线程的特点 2. 使用轮询强制等待 3. 轮询的弊端 4. 小结
14 0
json转换对象和字符串,实例解析
json转换对象和字符串,实例解析
15 0
+关注
19
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载