前端Ajax/JS/HTML+后端SpringMVC(一)

1.JSON

1.1. 转发或重定向的不足

对于发出的请求,最终需要给出“成功/失败”的结果的话,转发的方式来处理,给用户的体验就非常不好!即使用户填错了一项数据不达标,都需要回退至此前的页面重新填写,而原本填写的其它数据可能需要再填写一次!

并且,当用户发出请求后,如果是转发或者重定向,一定会发生页面的跳转!无法在页面中局部来提示信息。

从服务端的角度出来,其实,还存在浪费流量的问题!如果只是为了表达“成功/失败”,也许只需要1个“1/0”就可以了,根本就不需要使用整个网页来表达!

所以,当服务器需要向客户端响应某些数据,而不是响应整个页面时,可以使用JSON来组织数据!

1.2. JSON简介

早期,会使用XML来组织服务器响应的数据,例如:

<result>
    <state>-1</state>
    <message>修改密码失败!原密码错误!</message>
</result>

不过,这种做法导致的问题就是:解析比较麻烦,传输的数据量略大!后来,改用了JSON格式:

{
    "state": -1,
    "message":"修改密码失败!原密码错误!"
}

JSON是一种组织数据的格式,JavaScript天生就支持解析JSON数据,并且,这种格式相对于XML更加简洁,在传输过程中产生的流量将更小!

1.3. 语法格式

JSON是在JavaScript中的一种对象型数据,其数据的组成方式大致是:使用大括号框住所有内容,每项数据的名称都是字符串,需要使用引号(单/双均可)框住数据的名称,然后使用冒号与值分隔,值可以是各种数据类型,例如:数值型的值可以直接写,而字符串型的值需要引号,各个数据之间使用逗号进行分隔:

<script type="text/javascript">
var obj = { "state": -1, "message": "error" };
</script>

在JavaScript中,可以直接访问JSON对象中的任意数据,语法为:

var state = obj.state;

JSON中的数组

在JSON中的数据的值也可以是数组,例如:

var obj = { "state": -1, "message": "error", "skill": ["Java", "MySQL", "AJAX"] };

即使用[]表示数组,各数组元素之间使用逗号分隔。

则通过obj.skill可以访问到整个数组,通过obj.skill[下标]可以访问到数组中的某个元素,和其它语言一样,数组的下标是从0开始编号的。

JSON中的对象

在JSON中的某个数据的值也可以是对象型的,例如:

var obj = { "state": -1, "message": "error", "skill": ["Java", "MySQL", "AJAX"], "user": { "username": "Jack", "age": 18 } };

则使用obj.user就可以访问到整个对象,使用obj.user.username就可以访问到"Jack"这个值!

其实,在JSON中,可以无限的嵌套下去,即:JSON对象中包括某个子级对象,子级对象中还可以继续包含另一个子级对象,一直包含下去……

JSON对象与JSON字符串

在实际应用中,JSON对象往往并不是直接编写出来的,而是通过服务器端返回的!而服务器端返回的一定是字符串,而不会是一个JSON对象!即服务端返回的会是:

‘{ "state": -1, "message": "error" }‘

即:内容本身是JSON语法所组织的,但是,数据类型却是字符串,而不是JSON对象!

在JavaScript中,可以通过JSON.parse(str)函数将参数str进行转换,得到JSON对象!

1.4. 小结

JSON是一种组织数据结构的对象,支持在对象中存放若干个属性,属性的类型可以是各种类型,包括常用数据类型、数组和其它对象。

学习JSON重点掌握如何通过JSON组织数据。

JavaScript天生支持直接解析JSON对象,获取其中的数据。

当获取到的是JSON格式的字符串时,可以通过JSON.parse(str)函数将字符串转换为JSON对象!

2. 服务器向客户端响应数据

当服务器向客户端响应的需要是某些数据,而不是转发或者重定向时,需要在处理请求的方法之前添加@ResponseBody,而该注解默认是不识别的,在使用该注解之前,需要在Spring的配置文件中添加注解驱动:

<mvc:annotation-driven />

例如处理请求时:

@RequestMapping("/login.do")
@ResponseBody
public String showLogin() {
    return "hello, login"; // /WEB-INF/login.jsp
}

则在浏览器中得到的将是"hello, login"字符串,而不是网页的源代码!

注意:在没有进一步的配置之前,返回的内容中并不支持中文!

以“处理登录”为例,可以为处理请求的方法添加@ResponseBody注解,然后,调整各种情况下的返回值,无论是哪种情况(成功或失败),都使用JSON语法组织数据:

@RequestMapping(value="/handle_login.do",
    method=RequestMethod.POST)
@ResponseBody
public String handleLogin(
    @RequestParam("username") String username,
    @RequestParam("password") String password,
    HttpSession session) {

    try {
        User user
            = userService.login(username, password);
        session.setAttribute("uid", user.getId());
        session.setAttribute("username", user.getUsername());
        return "{ \"state\": 1 }";
    } catch (UserNotFoundException e) {
        return "{ \"state\": -1, \"message\": \"" + e.getMessage() + "\" }";
    } catch (PasswordNotMatchException e) {
        return "{ \"state\": -2, \"message\": \"" + e.getMessage() +"\" }";
    }
}

3. Jackson框架

使用Jackson框架,可以解决响应的数据可能乱码的问题(本质上是设置了响应头中的响应字符编码),并且,当响应某个对象时,会自动装响应头中的响应类型设置为json类型。

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.9.7</version>
</dependency>

除此以外,Jackson框架还可以将响应的对象自动转换为JSON字符串格式!通常,可以在项目中添加ResponseResult类:

public class ResponseResult {

    private Integer state;
    private String message;

    public Integer getState() {
        return state;
    }

    public void setState(Integer state) {
        this.state = state;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

}

SpringMVC框架对Jackson框架的支持性非常好,添加了Jackson依赖后,无须添加任何配置,也不需要在项目的任何位置显式的使用它。

4. AJAX

4.1. 简介

AJAX是一种异步提交请求并处理响应结果的做法,它本身是基于JavaScript实现的!

通常使用基于jQuery的AJAX处理方式,可以解决不同浏览器的版本兼容问题,并且使得代码的可读性变得更高,所以,通常需要:

<script type="text/javascript" src="${pageContext.request.contextPath }/jquery-3.3.1.min.js"></script>

然后调用jQuery中的ajax()函数来处理AJAX。

在ajax()函数的参数中,至少配置5个属性:

  • url:将请求提交到哪个URL
  • data:提交的参数
  • type:请求的类型
  • dataType:服务端响应的数据类型,可以是text、xml、json
  • success:当服务器正确响应(200)时如何处理,值是匿名函数,函数的参数就是服务端响应的JSON字符串转换得到的JSON对象

4.2. 小结

使用这种模式开发时,关于控制器端,应该:

1 处理请求的方法需要添加@ResponseBody注解;

2 处理请求的方法的返回值应该是ResponseResult

3 在处理请求的方法内部,无论是成功还是失败,当决定执行响应时,都应该在ResponseResult对象中封装必要的数据,然后返回ResponseResult对象。

关于前端,应该:

1 由于需要使用jQuery,所以,必须引入jQuery框架;

2 前端页面不强制需要<form>,并且,用户的提交操作触发的不是传统的提交表单,而应该触发JS事件,例如:可以将提交按钮的类型调整为type="button",并配置onclick="doReg()",表示当点击这个按钮时,执行JavaScript中的doReg()方法;

3 自定义JavaScript函数,且函数名与以上步骤中点击事件对应一致:

<script type="text/javascript">
function doReg() {

}
</script>

4 然后编写函数体,主要任务是调用jQuery框架中的ajax()函数来实现提交请求并获取响应结果:

function doReg() {
    // 获取用户输入的数据
    var u = $("#username").val();
    var p = $("#password").val();
    // 处理请求的URL
    var url = "handle_reg.do";
    // 提交到服务端的参数
    var data = "username=" + u + "&password=" + p;
    // 发出请求,并获取响应结果
    $.ajax({
        "url": url,
        "data": data,
        "type": "post",
        "dataType": "json",
        "success": function(json) {
            // 由于服务端使用了Jackson
            // 所以响应头中由Jackson自动设置了响应正文是json
            // 所以dataType的值就是"json"
            // 且当前成功时的处理函数的参数就是服务端响应的json对象
            if (json.state == 1) {
                alert("注册成功!");
            } else {
                alert("注册失败!" + json.message);
            }
        }
    });
}

原文地址:https://www.cnblogs.com/wood-life/p/10291154.html

时间: 2024-08-12 10:14:10

前端Ajax/JS/HTML+后端SpringMVC(一)的相关文章

前端Ajax/JS/HTML+后端SpringMVC(二)

1. jQuery AJAX 1.1. jQuery框架中的ajax()函数 在应用了jQuery框架后,调用ajax()函数即可发出AJAX请求,并获取响应结果,该函数的参数必须是JSON对象,通常,在JSON对象中封装的属性有: url:处理请求的URL,也可以理解为将请求发送到哪个URL,取值可以是绝对路径,或相对路径,但是,不可以跨域 data:请求的数据,通常是username=xx&password=xx&phone=xx类似的格式,可以通过字符串拼接得到该值,也可以通过jQu

前端AJAX传递数组给Springmvc接收处理

前端传递数组后端(Spring)来接收并处理: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>测试页面</title> <script type="text/javascript" src="http://www.ostools.net/js/jquery/jquery-1.7.2.js">

前端ajax用post方式提交json数据给后端时,网络报错 415

项目框架:spring+springmvc+mybatis 问题描述:前端ajax用post方式提交json数据给后端时,网络报错 415 前端异常信息:Failed to load resource: the server responded with a status of 415 (Unsupported Media Type) 后端异常信息:无 报错原因:缺少jackson包 类似问题注意点: springmvc添加配置.注解: pom.xml添加jackson包引用: Ajax请求时没

解决js(ajax)提交后端的“ _xsrf&#39; argument missing from POST” 的错误

首先先简述一下CSRF: CSRF是Cross Site Request Forgery的缩写(也缩写为XSRF),直译过来就是跨站请求伪造的意思,也就是在用户会话下对某个CGI做一些GET/POST的事情——这些事情用户未必知道和愿意做,你可以把它想做HTTP会话劫持. 网站是通过cookie来识别用户的,当用户成功进行身份验证之后浏览器就会得到一个标识其身份的cookie,只要不关闭浏览器或者退出登录,以后访问 这个网站会带上这个cookie.如果这期间浏览器被人控制着请求了这个网站的url

Atitit &#160;&#160;发帖机实现(3 )---usrQBN023 js提交ajax内容到后端规范与标准化

Atitit   发帖机实现(3 )---usrQBN023 js提交ajax内容到后端规范与标准化 大段内容务必要替换转义换行符号1 提交务必使用utf编码,否则解码后的可能缺失,是web server的bug应该.Resin4.0.221 大段内容务必要替换转义换行符号 C:\0workspace\AtiPlatf_cms\WebRoot\poster\gejy_pub.js cmd= cmd.replace(new RegExp("\r\n",'gm'),"\\r\\n

怎么通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端?

今天在论坛上看到这样一个问题,有必要编辑搜集下. 问题描述:怎么通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端 题主用jquery接收 <input name="c_pic" id="c_pic" type="file" class="file"> 用的方法是: var input = document.getElementById("c_pic"); inpu

Ajax+Node.js前后端交互最佳入门实践(01)

1.Node.js简介 1.0.前后台数据交互流程 在web开发中,我们经常听说前端和后台,他们分别是做什么具体工作的呢?他们怎样交互的呢?我们得把这些基础的问题都搞明白了,才有一个大致的学习方向,首先,我们来看一张生活中几乎每个人都经历过的一个场景,如下图: 当你去餐馆吃饭的时候,坐下后服务员会带着一个菜单过来,问你需要点什么菜,这个时候你浏览了菜单上的菜,把想吃的菜告诉服务员,服务员把你点的菜拿到后台,后台根据你点的菜名,逐一完成,菜做完后叫服务员给你上菜,就这么一个场景其实和我们web开发

Ajax+Node.js前后端交互最佳入门实践(07)

7.ajax函数封装 7.1.实例引入 需求: 每秒钟请求一次服务器 获取到数据 实现: 把ajax进行封装 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="ajax.js" type="text/javascript" charset="utf

写给刚入门的前端工程师的前后端交互指南

转自原文 写给刚入门的前端工程师的前后端交互指南 作为刚接触前端的不久的童鞋,大家都会兴奋于CSS和JS所带来漂亮界面,然而,前端工程师除了UI重构外,还有非常重要的职责在正确的区域渲染出服务端的数据.毕竟,我们要构建一个大的web应用,必然不是普普通通的静态页面构成. 下文将罗列将来前端工程师应该必备的同后端打交道的常用技能. 服务端渲染 谈起服务端渲染,对于动态服务而言,这个世界上跑的大多数页面都经历过服务端的数据渲染,接口->前端赋值->模版渲染 .这一切都在服务器完成,我们查看源码时候