SSM框架下使用JSON和AJAX进行前后端数据传输SSM框架下使用JSON和AJAX进行前后端数据传输

103 阅读 0 评论 68 点赞

我是靠谱客的博主自由时光，这篇文章主要介绍SSM框架下使用JSON和AJAX进行前后端数据传输SSM框架下使用JSON和AJAX进行前后端数据传输，现在分享给大家，希望可以做个参考。

SSM框架下使用JSON和AJAX进行前后端数据传输

随着前后端分离开发，前端使用ajax发送请求，后台提供相应的服务，之间的数据传递用JSON来完成！

接下来用登陆功能来演示前后端通过JSON交互

1. 前端页面

复制代码

<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2018/1/10 0010
Time: 上午 10:38
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<meta http-equiv="Access-Control-Allow-Origin" content="*">
</head>
<body>
<h1>登录页面</h1>
用户名：<input id="username" type="text" name="username"/><p></p>
密码：<input id="password" type="password" name="password"/></p>
<button id="btn" type="button">登录</button><p></p>
<span id="info"></span>
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$.ajax({
//提交数据的类型 POST GET
type:"POST",
//提交的网址
url:"login",
//提交的数据
data:{username:$("#username").val(),password:$("#password").val()},
//返回数据的格式
datatype: "json",
//成功返回之后调用的函数
success:function (data){
$("#info").html(data.status);
},
//调用出错执行的函数
error: function(error){
aler("ajax error : "+error);
}
});
});
});
</script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2018/1/10 0010
Time: 上午 10:38
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<meta http-equiv="Access-Control-Allow-Origin" content="*">
</head>
<body>
<h1>登录页面</h1>
用户名：<input id="username" type="text" name="username"/><p/>
密码：<input id="password" type="password" name="password"/></p>
<button id="btn" type="button">登录</button><p/>
<span id="info"></span>
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$.ajax({
//提交数据的类型 POST GET
type:"POST",
//提交的网址
url:"login",
//提交的数据
data:{username:$("#username").val(),password:$("#password").val()},
//返回数据的格式
datatype: "json",
//成功返回之后调用的函数
success:function (data){
$("#info").html(data.status);
},
//调用出错执行的函数
error: function(error){
aler("ajax error : "+error);
}
});
});
});
</script>
</body>
</html>

ajax的一些详细用法

url : 要求为String类型的参数，（默认为当前页地址）发送请求的地址
type : 要求为String类型的参数，请求方式（post或get）默认为get
async : 要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行
data : 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格式，例如{fo1:”bar1”,foo2:”bar2”}转换为&foo1=bar1&foo2=bar2。
dataType : 要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
xml：返回XML文档，可用JQuery处理。 html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。 script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。 json：返回JSON数据。 jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。 text：返回纯文本字符串。
success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
(1)由服务器返回，并根据dataType参数进行处理后的数据。 (2)描述状态的字符串。

复制代码

1
2
3
4
5
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this;
//调用本次ajax请求时传递的options参数
}

error : 要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：

复制代码

1
2
3
4
5
function(XMLHttpRequest, textStatus, errorThrown){
//通常情况下textStatus和errorThrown只有其中一个包含信息
this;
//调用本次ajax请求时传递的options参数
}

contentType：
要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为”application/x-www-form-urlencoded”。该默认值适合大多数应用场合。

2. controller

复制代码

package com.shangfu.controller;
import com.shangfu.dao.UserDao;
import com.shangfu.model.Student;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.servlet.http.HttpServletResponse;
import java.util.HashMap;
import java.util.Map;
@Controller
public class LoginController {
@Autowired
private UserDao userDao;
@RequestMapping(value="/login" , method= RequestMethod.POST , produces="application/json;charset=UTF-8")
public @ResponseBody Map<String,String> test(@RequestParam("username") String username, @RequestParam("password") String password,HttpServletResponse response){
Map<String,String> map = new HashMap<String, String>();
if(username.equals("hyh")&&password.equals("123")) {
map.put("status", "success");
return map;
}
map.put("status", "error");
return map;
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
package com.shangfu.controller;
import com.shangfu.dao.UserDao;
import com.shangfu.model.Student;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.servlet.http.HttpServletResponse;
import java.util.HashMap;
import java.util.Map;
@Controller
public class LoginController {
@Autowired
private UserDao userDao;
@RequestMapping(value="/login" , method= RequestMethod.POST , produces="application/json;charset=UTF-8")
public @ResponseBody Map<String,String> test(@RequestParam("username") String username, @RequestParam("password") String password,HttpServletResponse response){
Map<String,String> map = new HashMap<String, String>();
if(username.equals("hyh")&&password.equals("123")) {
map.put("status", "success");
return map;
}
map.put("status", "error");
return map;
}
}

pom文件添加架包

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- Jackson
fastjson-->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.5.2</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.5.2</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>2.5.2</version>
</dependency>