实例解析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格式的数据

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 && 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("用户<" + user.getUserName()
                              + ",ip=" + request.getRemoteAddr() + ">登录系统");
            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~

OK,到此整个请求结束,有不明白的请留言或者到“关于”中联系我

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

相关文章
php封装json通信接口详解及实例
php创建JSON数据详解: ``` <?php //创建一个字符数组 $arr=array( 'id'=>1, 'name'=>'david' ); echo json_encode($arr);//这个是创建JSON的关键函数 ?> ...
1624 0
Java解析(读取)Json数据
以前看过书上说,XML是web service间传输信息的标准格式吧,就看了看XML。最近在做个网站,又说是有了JSON,第一回听说就看了看,总结总结一下。 1.JSON介绍   JSON比XML简单,主要体现在传输相同信息的情况下,文件的大小不同。
1503 0
使用W“.NET技术”CF实现SOA面向服务编程——简单的WCF开发实例
  前面为大家介绍过WCF的特点,现在再讲解一下WCF基础概念。   在WCF里,各个Application之间的通信是由EndPoint来实现的,EndPoint是WCF实现通信的核心要素。一个WCF Service可由多个EndPoint集合组成,每个EndPoint只能有一种绑定,就是说EndPoint就是通信的入口,客户端和服务端通过 EndPoint交换信息。
690 0
IPerf——网络测试工具介绍与源码解析(5)
本篇随笔讲述一下TCP协议下,双向测试模式和交易测试模式下客户端和服务端执行的情况; 双向测试模式: 官方文档的解释 Run Iperf in dual testing mode. This will cause the server to connect back to the client ...
963 0
IPerf——网络测试工具介绍与源码解析(2)
对于IPerf源码解析,我是基于2.0.5版本在Windows下执行的情况进行分析的,提倡开始先通过对源码的简单修改使其能够在本地编译器运行起来,这样可以打印输出一些中间信息,对于理解源码的逻辑,程序实现的过程能够起到事半功倍的效果。
953 0
让小程序在自有App中启动的技术来了:mPaaS小程序架构深度解析
mPaaS 小程序框架作为一款 App 通用框架,帮助开发者面向自身的 App 实现小程序投放。不止如此,小程序代码仅需撰写一次,便可多端投放至自有 App、支付宝、钉钉甚至其他小程序开放平台。
1743 0
第10周-任务0-构造和析构函数的执行过程实例解析
【题目】阅读程序,先分析程序的执行结果,在上机时运行程序进行对照,再通过单步执行跟踪程序的运行,达到理解基类、派生类中构造函数、析构函数执行过程的目的。 程序如下: #include &lt;iostream&gt; using namespace std; class Part  //部件类 { public:     Part();     Part(int i);     ~
934 0
IPerf——网络测试工具介绍与源码解析(1)
IPerf是一个开源的测试网络宽带并能统计并报告延迟抖动、数据包丢失率信息的控制台命令程序,通过参数选项可以方便地看出,通过设置不同的选项值对网络带宽的影响,对于学习网络编程还是有一定的借鉴意义,至少可以玩上一段时间。
1019 0
+关注
19
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载