由于是使用Jquery，所以需要引入Jquery的js文件
在html的头部<head></head>加上
<script type="text/javascript" src="./js/jquery.min.js"></script>
具体的目录位置根据你的项目进行改变。
前端的HTML如下：【为了使代码看起来比较清楚，我将样式全部都清掉了】
<!--登陆表单--> <label>用户名</label> <input id="username" type="text" /> <label>密码</label> <input id="password" type="password"/> <button id="login-button">登陆</button>
public.js【异步提交我写在这个文件里面】
$(function () { //当登陆按钮被点击的时候，异步提交表单 $('#login-button').click(function () {
//获取到用户输入的用户名和密码 var usm = $('#username').val(); var psw = $('#password').val(); if (usm == "" || psw == "") { alert("用户名或者密码不能为空!"); } else { //异步提交表单 $.ajax({ data: {"username": usm, "password": psw}, type: "POST", url: "/login", success: function (flag) { //接收服务器的数据 }, error : function (flag) { //错误处理 } }); } }); });
SpringMVC后台Controller:
@ResponseBody //声明响应Ajax请求 //声明请求URL，请求方式，编码方式【防止乱码】 @RequestMapping(value = "/login", method = RequestMethod.POST, produces = "text/html;charset=UTF-8;") public String getUser(String username, String password) { //data是JSON对象，类似于Map,可以放入键值对，传到前端 JSONObject data = new JSONObject(); System.out.println("username:"+username+","+password); data.put("state",true); return data.toString(); }
注：这里使用了JSONObject类，这个类的maven依赖为：
<!--JSON支持-->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.2</version>
</dependency>
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20160810</version>
</dependency>
与此同时，需要在Spring-Servlet.xml中添加
<mvc:annotation-driven/>
对JSON进行支持
如有错误，请评论我进行更正。