前端AjaxJSHTML+后端SpringMVC（一）

概述1.JSON 1.1. 转发或重定向的不足 对于发出的请求，最终需要给出“成功/失败”的结果的话，转发的方式来处理，给用户的体验就非常不好！即使用户填错了一项数据不达标，都需要回退至此前的页面重新填写，而原本填写的其它数据可能需要再填写一次！ 并且，当用户发出请求后，如果是转发或者重定向，一定会发生页面的跳转！无法在页面中局部来提示信息。 从服务端的角度出来，其实，还存在浪费流量的问题！如果只是为 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,"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")@ResponseBodypublic String showLogin() {    return "hello,login"; // /WEB-INF/login.Jsp}

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

注意：在没有进一步的配置之前，返回的内容中并不支持中文！

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

@RequestMapPing(value="/handle_login.do",method=RequestMethod.POST)@ResponseBodypublic 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);            }        }    });}

总结

以上是内存溢出为你收集整理的前端Ajax/JS/HTML+后端SpringMVC（一）全部内容，希望文章能够帮你解决前端Ajax/JS/HTML+后端SpringMVC（一）所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。