前端ajax和ssm后端使用json交互实践

传统的ssm是使用jsp，后端将数据添加进model再jsp中使用EL表达式取用，但是这种方式对jsp的依赖太大，页面跳转等逻辑需要后端处理，耦合度高效率低下。于是采用ajax传递json数据实现前后端交互。

前端代码：

<form id="postFrom" action="">
    <input ...>
    <input ...>
</form>
<button id="submitButton" type="button">submit</button>

<script>
    $(function() {
        var postUrl = "${pageContext.request.contextPath}/registerUser";
        $("#submitButton").click(function () {
            $.ajax( {
                type : "post",
                url : postUrl,
                datatype : "json",
                data : $("#postForm").serialize(),
                success : function(data) {
                    if(data.status == 1) {
                          window.location.href="${pageContext.request.contextPath}/loginPage"
                    }
                },
                error : function() {
                    alert("error");
                }

            });
        });
    });
</script>

form标签里是表单的表格，需要注意的是button不要是submit类型的，不然会以form的action形式提交数据，这里我们要使用的是ajax提交数据。

ajax指定了提交的url：对应后端controller里的registerUser()方法

datatype：json

data：$("#postForm").serialize() //这里直接使用form的id将form表单里的数据批量加载进来

然后就是success和error方法了。

点击提交按钮后数据将以json数据形式发送到后端：

后端部分：

首先ssm的后端要处理json数据需要导入json的jar包（在pom.xml中添加依赖）：

<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>

另外springMVC的配置文件***-servlet.xml里要开启注解驱动，这里本来是添加了几个常用的Converter，但是好像会有版本冲突无法注入这几个bean于是将它们注释掉了（这里是个问题，未解决），只标注<mvc:annotation-driven/>仍然可以正常运行。

注：原来当运行环境中有json的支持时，Spring会自动注册一个json的转换器。

<mvc:annotation-driven>
    <!-- 配置转换器，@ResponseBody和@RequestBody注解可以自动选择相应的转换器-->
    <!--
    <mvc:message-converters>
        <bean class="org.springframework.http.converter.ResourceHttpMessageConverter" />
        <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter" />
        <bean class="org.springframework.http.converter.xml.MappingJackson2XmlHttpMessageConverter" />
    </mvc:message-converters>
    -->
</mvc:annotation-driven>

配置好之后看Controller

@ResponseBody
@RequestMapping(value="/registerUser", produces="application/json;charset=UTF-8")
public Result registerUser(User user) {
    //这里采用实体类接受数据，json的key值和实体类对象user域名一致，spring自动装入
    userService.addUser(user);
    Result result = new Result();
    result.setStatus(1);
    return result;
}

Result是自己定义的POJO类只有一个int型的status域。

@ResponseBody注解能将返回结果自动转换，这里转换成json数据

ajax接受到数据后将页面跳转到login页面。

前端ajax和ssm后端使用json交互实践

猜你喜欢