用SpringMVC和Jquery的Ajax进行异步提交表单

Posted 2020-12-24 江城歌吹风流

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用SpringMVC和Jquery的Ajax进行异步提交表单相关的知识，希望对你有一定的参考价值。

由于是使用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进行支持

如有错误，请评论我进行更正。

以上是关于用SpringMVC和Jquery的Ajax进行异步提交表单的主要内容，如果未能解决你的问题，请参考以下文章

spring,springmvc,mybatis框架实现用户修改密码功能，用ajax来提交表单数据

jQuery jQuery对Ajax的使用

springMVC——完成Ajax功能

Springmvc下的jquery,ajax和json的等技术的运用

分享一套spring+springMVC+mybaits+EasyUI+jQuery+Ajax+面向接口编程进销存管理系统源码！