SpringMVC 与Ajax 实现数据交互-蒲公英云

SpringMVC 与Ajax 实现数据交互

末蓝、 2021-11-09 12:56 457阅读 0赞

1 导入jQuery

2 编写页面发送与接收json数据

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax数据交互</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function(){
    //params 是一个POJO类的json
    var params = '{"id": 1,"name": "测试商品","price": 99.9,"detail": "测试商品描述","pic": "123456.jpg"}';
    $.ajax({
        url : "${pageContext.request.contextPath }/json.action",
        data : params,
        contentType : "application/json;charset=UTF-8",//发送数据的格式
        type : "post",
        dataType : "json",//回调
        success : function(data){
            alert(data.name);
        }
    });
});
</script>
</head>
<body> 
</body>
</html>

3 引入SpringMvc支持json的jar包

4 controller接收【ReqestBody】并解析数据并返回【ResponseBody】

@RequestBody注解实现接收http请求的json数据，将json数据转换为java对象进行绑定

@ResponseBody注解用于将Controller的方法返回的对象，通过springmvc提供的HttpMessageConverter接口转换为指定格式的数据如：json,xml等，通过Response响应给客户端

package com.controller;
import java.util.Date;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import com.pojo.Items;
import com.service.ItemService;
@Controller
public class ItemController {
    @Autowired
    private ItemService itemService;
    //接收与返回json数据
    @RequestMapping("json.action")
    public @ResponseBody Items json(@RequestBody Items items){
        return items;
    }
}