`
yuexiaowen
  • 浏览: 124710 次
  • 性别: Icon_minigender_2
  • 来自: 咸阳
社区版块
存档分类
最新评论

jquery 学习

    博客分类:
  • ajax
阅读更多

一、相关技术、工具简介

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 {
			return;
		}
 
		// 发送请求
		$.ajax({
			url	: 'login.do',
			data	: { loginName:$('#loginName').val(), password: $('#password').val() },
			success : function(result){
				// 根据result返回信息判断是否登录成功
				if(result &amp;&amp; result == 'success') {
					window.location.href = 'index.jsp';
				} else {
					alert('登录失败,用户名或密码错误,请重试!');
				}
			}
		});
 
	});
});

这样当点击“登录”按钮的时候触发ajax请求:

  1. 验证表单完整性
  2. 发送ajax请求到后台,值通过data键已JSON格式传送至后台
  3. 如果后台返回的result为success时表示登录成功,页面跳转至首页index.jsp

三、后台工作方式

后台要比前台操作复杂一些,以为涉及到数据库、编码或者一些业务逻辑

1、获得请求参数

有两种方式:

  • 通过request.getParameter(”key”)的方式
  • 通过json-lib工具包获取

这我们主要讲解怎么通过json-lib获取参数

首先我们来写一个公共的方法,可以返回一个net.sf.json.JSONObject对象,具体代码如下:

/**
 * 读取请求参数转换JSONObject对象
 *
 * @param request HttpServletRequest 对象
 * @return json格式的String对象
 * @throws Exception
 */
@SuppressWarnings("unchecked")
protected JSONObject readJson(HttpServletRequest request) throws Exception {
	JSONObject jsonObject = new JSONObject();
	try {
		Map parameterMap = request.getParameterMap();
                // 通过循环遍历的方式获得key和value并set到JSONObject中
		Iterator paIter = parameterMap.keySet().iterator();
		while (paIter.hasNext()) {
			String key = paIter.next().toString();
			String[] values = (String[])parameterMap.get(key);
			jsonObject.accumulate(key, values[0]);
		}
		log.debug("从客户端获得json=" + jsonObject.toString());
	} catch (Exception e) {
		log.error("获取json数据出错,错误信息如下:nt" + e.getMessage());
		e.printStackTrace();
		throw e;
	}
	return jsonObject;
}

通过这个方法我们可以获得一个JSONObject对象,然后就可以通过key获得对应的value;

2、登录处理Action

public ActionForward login(ActionMapping mapping, ActionForm actionForm,
             HttpServletRequest request,HttpServletResponse response) throws Exception {
	JSONObject jsonObject = readJson(request);
	String name = jsonObject.getString("loginName");
	String pass = jsonObject.getString("password");
	try {
		int loginFlag = userManager.validLogin(name, pass);
		if (loginFlag == UserManager.LOGIN_SUCCESS) {
			User user = userManager.getUserByNameAndPass(name, pass);
			UserUtil.saveUser2Session(user, request);
			log.info("用户&lt;" + user.getUserName()
                              + ",ip=" + request.getRemoteAddr() + "&gt;登录系统");
			print(response, RESBONSE_SUCCESS);
		} else if (loginFlag == UserManager.LOGIN_FAIL) {
			print(response, RESBONSE_ERROR);
		}
	} catch (Exception e) {
		e.printStackTrace();
	}
	return null;
}

解释:

在34行我们通过刚刚准备好的readJson方法获得一个JSONObject对象,接下来通过key获得用户名和密码,接下来就是业务逻辑的验证工作了,通过后我们向前台返回请求结果。
我们还需要一个小方法向前台写结果,如上面44、46行

protected void print(HttpServletResponse response, String info) throws IOException {
	try {
		response.getWriter().print(info);
	} catch (IOException e) {
		e.printStackTrace();
		throw e;
	}
}

这里有一点要说明,在获得输出流的时候有个小插曲,我在开发的时候使用的tomcat5.5.26版本,
当时的写法为:

response.getOutputStream().print(info);

后来源码开源后一个网友使用的tomcat6版本,说系统不能正常运行,后来他查到了原因,因为获得输出流时出了问题,
改成getWriter就没有问题了,集体也没有搞清除为什么会是这样……

基于java开发时会使用struts,struts需要返回一个ActionMapping对象,但是在ajax请求不需要返回特定页面,因为根本没有跳转页面的动作,解决办法很简单,直接return null就可以了

输出结果后jQuery的ajax的success方法就接收到了请求结果,然后就可以根据结果处理业务逻辑了O(∩_∩)O~

 

分享到:
评论

相关推荐

    精选 jquery 学习资料

    本压缩包包含的“精选jQuery学习资料”是针对这一强大的库进行深入学习的重要资源。 首先,我们来看看`jquery-1.2.6.js`,这是jQuery库的1.2.6版本的源代码文件。这个版本的历史悠久,但依然具有学习价值,因为它...

    jquery学习资料大全

    **jQuery学习资料大全** 在IT领域,jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript代码,使得网页交互和DOM操作变得更加便捷。这份“jQuery学习资料大全”提供了丰富的资源,无论你是初学者还是有...

    JQuery学习手册.rar

    《JQuery学习手册》是一份全面且深入的资源,旨在帮助开发者掌握JavaScript库JQuery的核心概念和实用技巧。这份手册不仅包含理论知识,还有实践应用的案例,是初学者和经验丰富的开发者提升JQuery技能的理想参考资料...

    JQuery学习网站

    **jQuery学习网站** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。由于其简洁的语法和强大的功能,jQuery成为了前端开发中的首选工具之一。 这篇博文链接...

    jQuery学习笔记(一)

    **jQuery学习笔记(一)** 在深入探讨jQuery之前,我们首先要理解什么是jQuery。jQuery是一个高效、易用且功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。由John Resig在2006...

    jquery学习资料+教程

    jquery学习资料+教程 包括五个文档:jQuery的起点教程,jQuery经典入门教程,jquery的基本用法.pdf,2010最新jQuery学习资料.pdf,精通JavaScript+jQuery.pdf

    jQuery学习示例 大全

    **jQuery学习示例大全** jQuery是一款广泛应用于网页开发的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。这个"jQuery学习示例大全"涵盖了从基础到进阶的各种示例,帮助开发者快速掌握...

    Jquery学习笔记Jquery学习笔记

    Jquery学习笔记 Jquery学习笔记是指使用Jquery框架来实现javascript编程的笔记记录,本笔记记录了Jquery-1.2的基本用法、Ajax异步交互、XMLHttpRequest对象的基本应用等知识点。 一、Jquery基本用法 Jquery是一个...

    jQuery学习指南

    【jQuery学习指南】 jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript编程,提高了网页开发的效率。jQuery的核心理念是“write less, do more”,通过提供一系列强大的API,开发者可以便捷地处理DOM...

    JQuery学习资料

    这个“JQuery学习资料”压缩包包含了一系列与JQuery相关的学习资源,旨在帮助开发者深入理解和掌握JQuery的核心概念和实用技巧。 首先,`jquery1.4 API`是JQuery 1.4版本的官方API文档,它详细列出了该版本的所有...

    jquery学习资料

    **jQuery学习资料** jQuery是一款广泛应用于前端开发的JavaScript库,它极大地简化了JavaScript代码的编写,使得DOM操作、事件处理、动画制作等任务变得更加简单。本资料包包含了jQuery的学习资源,包括PPT教程和...

    jQuery学习文档

    以下是对 jQuery 学习文档中提到的关键知识点的详细说明: 1. **jQuery 语法实例**: - `$(this).hide()`:隐藏当前选中的元素。 - `$("#test").hide()`:隐藏 ID 为 "test" 的元素。 - `$("p").hide()`:隐藏...

    jQuery学习笔记

    **jQuery学习笔记** jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript代码的编写,使得网页交互变得更加简单。这个资源包含了作者在自学jQuery过程中积累的笔记,以HTML页面的形式呈现,方便阅读和...

    learn.jquery.com, jQuery学习中心网站内容.zip

    learn.jquery.com, jQuery学习中心网站内容 jQuery学习站点这里站点的目标是双重的:如何使用jQuery和JavaScript信息的中心。可以信。详细的详细信息。为了保持及时。活动和社区驱动的参考,具有相对较低的贡献。...

    jQuery学习资料

    **jQuery学习资料** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。这个学习资料包包含了多个面向初学者和中级开发者的资源,旨在帮助你快速掌握jQuery的核心...

    jquery学习文档中文版

    《jQuery学习文档中文版》是面向初学者和进阶开发者的一份宝贵资源,它详尽地介绍了jQuery库的各种功能和用法。jQuery是一款强大的JavaScript库,简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务,使得前端...

    jquery 学习课堂工具

    **jQuery学习课堂工具详解** jQuery,作为一款广泛应用于Web开发的JavaScript库,为开发者提供了简洁、高效的API,使得DOM操作、事件处理、动画设计以及Ajax交互变得更加简单。本"jQuery学习课堂工具"专注于帮助...

    jquery学习大全

    **jQuery学习大全** jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript代码的编写,使得网页交互变得更加简单。作为初学者,了解并掌握jQuery是成为Web开发高手的重要步骤。本资源包"jQuery学习大全...

Global site tag (gtag.js) - Google Analytics