java 利用jquery 前后的交互
来源:互联网 发布:乌尔古城 3d扫描数据 编辑:程序博客网 时间:2024/06/08 03:09
以本站的开源项目账务管理系统的“债务人”模块为例子讲解
一、效果预览
二、实现方式
基本思想就是绑定列表中的人员名称触发事件,获得当前人员的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设置valuefor (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~
- java 利用jquery 前后的交互
- Ajax+jquery 的前后台交互学习
- jQuery的ajax前后台数据交互
- Ajax+jquery 的前后台交互学习
- jsp和java前后台的交互
- Jquery Ajax前后台交互
- 利用AjaxPro2实现前后台数据交互
- thinkphp 用jquery ajax前后台交互
- Ajax、jquery实现前后台数据交互
- SpringMVC实现前后台交互jQuery dataTables
- struts2+spring+hibernate+json+jquery+flexigrid开发笔记-前后台数据交互的总体设想
- 自学jquery,下午实现前后台交互--成为牛逼的女程序员
- Java web项目前后台数据交互
- java项目前后台怎么交互详解
- asp.net 利用js 脚本 交互前后台
- web 前后台数据交互的方式
- json 与DATATABLE 前后台的交互
- web前后台的参数交互方式
- 网络基础知识
- ural 1297 Palindrome
- 。。。
- Socket错误代码对应表
- xml语言定义
- java 利用jquery 前后的交互
- javaRebel(jRebel)使用手记
- 1,2,5,10四个基数任意次数组合相加得到一个数N,求所有可能组合
- HDU/HDOJ 2715 Herd Sums USACO 2003 March Orange
- linux下dup/dup2函数的用法2
- VB.NET数据库另一种添加删除操作
- 一个软件项目主要分为哪些阶段?各个阶段主要做哪些工作?
- 2011-9-19 xml 初步学习
- 實例解析Java jquery json的執行過程