SpringMVC 与Ajax 实现数据交互

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

1 导入jQuery

![20190802104236189.png][]

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包

![201908021110328.png][]

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

![20190802111931355.png][]

[20190802104236189.png]: /images/20211109/70c6dc94355549cfbb8971d39fed84ad.png
[201908021110328.png]: /images/20211109/686819b3839d44d9af4c3e882af01b62.png
[20190802111931355.png]: /images/20211109/4316a2e355d24c478c0c142cc70a0bf7.png