`

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 {
                        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请求:

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

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

1、获得请求参数

有两种方式:

1.通过request.getParameter(“key”)的方式
2.通过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~

OK,到此整个请求结束,有不明白的请留言或者到“关于”中联系我
分享到:
评论
1 楼 gejialun88 2011-07-24  
  

相关推荐

    电子商务之价格优化算法:梯度下降:机器学习在价格优化中的角色.docx

    电子商务之价格优化算法:梯度下降:机器学习在价格优化中的角色.docx

    ToadforOracle与Oracle数据库版本兼容性教程.docx

    ToadforOracle与Oracle数据库版本兼容性教程.docx

    browser360-cn-stable-13.3.1016.4-1-amd64.deb

    360浏览器银河麒麟版 for X86 适配兆芯 / 海光 / intel / AMD CPU

    基于React.js和Material-UI个人作品集网站模板(附源码+说明文档).zip

    使用React.js构建,提供多种主题可供选择,并且易于定制。该项目旨在帮助开发者和自由职业者创建自己的个性化投资组合。 主要功能点 多种主题可供选择,包括绿色、黑白、蓝色、红色、橙色、紫色、粉色和黄色 易于定制,可以在src/data文件夹中更新个人信息 包含主页、关于、简历、教育、技能、经验、项目、成就、服务、推荐信、博客和联系等多个部分 支持通过Google表单收集联系信息 提供SEO优化建议 支持多种部署方式,如Netlify、Firebase、Heroku和GitHub Pages 技术栈主要 React.js Material-UI Axios React-fast-marquee React-helmet React-icons React-reveal React-router-dom React-router-hash-link React-slick Slick-carousel Validator

    中小型企业财务管理系统 SSM毕业设计 附带论文.zip

    中小型企业财务管理系统 SSM毕业设计 附带论文 启动教程:https://www.bilibili.com/video/BV1GK1iYyE2B

    apsw-3.38.5.post1-cp39-cp39-win_amd64.whl.rar

    python whl离线安装包 pip安装失败可以尝试使用whl离线安装包安装 第一步 下载whl文件,注意需要与python版本配套 python版本号、32位64位、arm或amd64均有区别 第二步 使用pip install XXXXX.whl 命令安装,如果whl路径不在cmd窗口当前目录下,需要带上路径 WHL文件是以Wheel格式保存的Python安装包, Wheel是Python发行版的标准内置包格式。 在本质上是一个压缩包,WHL文件中包含了Python安装的py文件和元数据,以及经过编译的pyd文件, 这样就使得它可以在不具备编译环境的条件下,安装适合自己python版本的库文件。 如果要查看WHL文件的内容,可以把.whl后缀名改成.zip,使用解压软件(如WinRAR、WinZIP)解压打开即可查看。 为什么会用到whl文件来安装python库文件呢? 在python的使用过程中,我们免不了要经常通过pip来安装自己所需要的包, 大部分的包基本都能正常安装,但是总会遇到有那么一些包因为各种各样的问题导致安装不了的。 这时我们就可以通过尝试去Python安装包大全中(whl包下载)下载whl包来安装解决问题。

    电子商务之价格优化算法:线性回归:价格优化策略实施.docx

    电子商务之价格优化算法:线性回归:价格优化策略实施.docx

    工业数字化转型的关键技术及其应用场景解析

    内容概要:报告详细介绍了企业数字化转型的驱动因素、数字化转型方案分类及其应用场景,重点关注了云计算、超连接、数字孪生、人工智能、分布式账本、增材制造、人机接口、数据共享、工业物联网等关键技术。这些技术不仅支持了企业的运营效率提升和业务模式创新,也为实现更快、更开放、更高效的数字化转型提供了支撑。报告最后提出了企业实施数字化转型的六个步骤。 适合人群:企业高级管理人员、技术人员、咨询顾问,以及对工业数字化转型感兴趣的读者。 使用场景及目标:帮助企业制定和实施数字化转型策略,优化运营模式,提升业务效率,增强市场竞争力。同时,也可作为政府部门、研究机构和行业协会的参考文献。 其他说明:报告中提到的关键技术及其应用场景对企业数字化转型具有重要的指导意义,特别是对于那些希望通过数字化转型实现业务创新和升级的企业。

    基于java的线上选课系统的设计与实现答辩PPT.pptx

    基于java的线上选课系统的设计与实现答辩PPT.pptx

    原版aggdraw-1.3.15-cp311-cp311-win_arm64.whl-下载即用直接pip安装.zip

    安装前的准备 1、安装Python:确保你的计算机上已经安装了Python。你可以在命令行中输入python --version或python3 --version来检查是否已安装以及安装的版本。 个人建议:在anaconda中自建不同python版本的环境,方法如下(其他版本照葫芦画瓢): 比如创建python3.8环境,anaconda命令终端输入:conda create -n py38 python==3.8 2、安装pip:pip是Python的包管理工具,用于安装和管理Python包。你可以通过输入pip --version或pip3 --version来检查pip是否已安装。 安装WHL安装包 1、打开命令行(或打开anaconda命令行终端): 在Windows上,你可以搜索“cmd”或“命令提示符”并打开它。 在macOS或Linux上,你可以打开“终端”。 2、cd到whl文件所在目录安装: 使用cd命令导航到你下载的whl文件所在的文件夹。 终端输入:pip install xxx.whl安装即可(xxx.whl指的是csdn下载解压出来的whl) 3、等待安装完成: 命令行会显示安装进度,并在安装完成后返回提示符。 以上是简单安装介绍,小白也能会,简单好用,从此再也不怕下载安装超时问题。 使用过程遇到问题可以私信,我可以帮你解决! 收起

    电子商务之价格优化算法:贝叶斯定价:贝叶斯网络在电子商务定价中的应用.docx

    电子商务之价格优化算法:贝叶斯定价:贝叶斯网络在电子商务定价中的应用.docx

    IMG_20241105_235746.jpg

    IMG_20241105_235746.jpg

    基于java的毕业设计选题系统答辩PPT.pptx

    基于java的毕业设计选题系统答辩PPT.pptx

    专升本考试资料全套.7z

    专升本考试资料全套.7z

    Trustwave DbProtect:数据库活动监控策略制定.docx

    Trustwave DbProtect:数据库活动监控策略制定.docx

    VB程序实例-CD-ROM开关.zip

    基于VB的程序实例,可供参考学习使用

    课设毕设基于SpringBoot+Vue的教育资源共享平台源码可运行.zip

    本压缩包资源说明,你现在往下拉可以看到压缩包内容目录 我是批量上传的基于SpringBoot+Vue的项目,所以描述都一样;有源码有数据库脚本,系统都是测试过可运行的,看文件名即可区分项目~ |Java|SpringBoot|Vue|前后端分离| 开发语言:Java 框架:SpringBoot,Vue JDK版本:JDK1.8 数据库:MySQL 5.7+(推荐5.7,8.0也可以) 数据库工具:Navicat 开发软件: idea/eclipse(推荐idea) Maven包:Maven3.3.9+ 系统环境:Windows/Mac

    基于Thinkphp5框架的Java插件设计源码

    该源码项目是一款基于Thinkphp5框架的Java插件设计,包含114个文件,其中Java源文件60个,PNG图片32个,XML配置文件7个,GIF图片7个,Git忽略文件1个,LICENSE文件1个,Markdown文件1个,Xmind文件1个,Idea项目文件1个,以及JAR文件1个。

    数据库开发和管理最佳实践.pdf

    数据库开发和管理最佳实践.pdf

    课设毕设基于SpringBoot+Vue的农场投入品运营线上管理系统源码可运行.zip

    本压缩包资源说明,你现在往下拉可以看到压缩包内容目录 我是批量上传的基于SpringBoot+Vue的项目,所以描述都一样;有源码有数据库脚本,系统都是测试过可运行的,看文件名即可区分项目~ |Java|SpringBoot|Vue|前后端分离| 开发语言:Java 框架:SpringBoot,Vue JDK版本:JDK1.8 数据库:MySQL 5.7+(推荐5.7,8.0也可以) 数据库工具:Navicat 开发软件: idea/eclipse(推荐idea) Maven包:Maven3.3.9+ 系统环境:Windows/Mac

Global site tag (gtag.js) - Google Analytics