将表单转化为JSON字符串
- 准备材料
- 前端编写
1.准备材料
我用的是jquery-3.3.1.min.js的本地包，也可以用网络CDN，但有时候网络上的CDN会没有响应，具体的可以看浏览器的调试信息。运行环境是STS。
2.前端编写
这里以一个小的登录功能为例子，代码如下：
script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function()
{
$("#bt1").click( function()
{
login();
}
);
})
/*登录 */
function login()
{
var LoginData = $("#loginform").serializeArray();
var LoginPram = {};
for(var i =0;i<LoginData.length;i++)
{
LoginPram[LoginData[i].name] = LoginData[i]['value'];
}
$.ajax(
{
url:"/CheckLogin",
type :"post",
datatype :"json",
contentType:"application/json;charsetset=UTF-8",
data : JSON.stringify(LoginPram),
success:function(data)
{
if(data.result=="false")
{
alert("用户名或密码错误，请重新输入")
}
else
{
window.location.href=data.view;
}
}
})
}
</script>
</head>
<body background="image/back1.PNG">
<div align = "center">
<br/><br/><br/><br/><br/><br/> /*前端不太会，<br>用来调整位置*/
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/>
<form id = "loginform">
用户名:<input type="text" name="cardid" id="name" ><br/>
密码：<input type = "password" name = cardpassword id = "password">
</form>
<button id = "bt1" class="button">登录</button>
</div>
</body>
我们一条一条看：
1.我们jsp页面上有两个东西，一个是表单另外一个是一个按钮。
2.表单是用来获取用户信息的，按钮是用来发送ajax请求的。
3.表单转化为json数组：
var LoginData = $("#loginform").serializeArray();
var LoginPram = {};
for(var i =0;i<LoginData.length;i++)
{
LoginPram[LoginData[i].name] = LoginData[i]['value'];
}
具体原理就不赘述了，感兴趣的看这里
只要把表单的id改成你自己的表单id就能用。
然后我们看ajax部分：
$.ajax(
{
url:"/CheckLogin",
type :"post",
datatype :"json",
contentType:"application/json;charsetset=UTF-8",
data : JSON.stringify(LoginPram),
success:function(data)
{
if(data.result=="false")
{
alert("用户名或密码错误，请重新输入")
}
else
{
window.location.href=data.view;
}
}
})
ajax是一个比较结构化的东西，所以这里也比较简单：
url：你想要请求的后端RequestMapping
type:请求方式，我们由于要发送信息到后台，所以就用post
datatype：期望接收的数据格式，这里我们用了json
contentType：发送消息主体格式，由于Spring对json有很好的支持，所以很多都是application/json
data：你的消息或者数据主体
success：回调方法
3. 后端接受请求返回数据
代码如下：
@RequestMapping("CheckLogin")
@ResponseBody
public Map checkLogin(@RequestBody CardInfo card ,HttpSession session)
{
Map<String, String> map = new HashMap<>(16);
Long cardId = card.getCardid();
CardInfo cardCheck = cardService.quaryCardInfo(cardId);
if(cardCheck!=null)
{
if(card.getCardpassword().equals(cardCheck.getCardpassword()))
{
map.put("result", "true");
map.put("view","main");
session.setAttribute("loginCard", cardId);
}
else
{
map.put("result", "false");
}
}
else
{
map.put("result", "false");
}
return map;
}
由于我们前端发送的账号和密码是实体类CardInfo的数据，由于Spring的映射机制，会把传来的数据通过@RequestBody注解注入到对象中。然后后台就拿到了前端传来的数据。然后我们用Map来返回数据。在Map对象里写入你想要返回的数据。然后将Map对象返回。
在前端的Succcess里，我们直接用参数点name就可以取出想要的value了。
个人实验成功，有出错的地方或者大佬有更好的方法欢迎指正，感谢。
![JDK导入安全证书失败异常问题解决[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)