SpringMVC处理ajax请求

html里写一个这样的a标签:

<a class="dropdown-item" id="test">点击就送屠龙刀</a>

待会ajax根据id获取点击事件

ajax函数这样写:

<script type="text/javascript">
	$(function(){
		$("#test").click(function(){
			var url="http://localhost:8080/xxxx/test.do";
			$.post(
				url,
				{
					username:'aaaa',         //自定义变量
					password:$("#pwd").val() //根据id获取值
				},
				function(result){
					alert(result.message);  //展示响应数据
				}
			);
		});
	});
</script>

然后再控制器里这样写:

    @ResponseBody
    @RequestMapping(value="/test.do")
	public ModelAndView preview(HttpServletRequest request,ModelAndView m) {
		ModelAndView modelAndView = new ModelAndView(new MyView());
		Map<String, Object> data = new HashMap<>();
		data.put("success",true);
		data.put("message","成功");
		modelAndView.addAllObjects(data);
		return modelAndView;
    }

其中,MyView重写了renderMergedOutputModel方法,将输入数据转换为JSON格式,代码如下:

import java.io.ByteArrayOutputStream;
import java.io.OutputStream;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.web.servlet.view.AbstractView;

import com.alibaba.fastjson.JSONObject;

/**
 * 自定义视图,用于控制器向前端传输json格式的ajax响应信息
 *
 */
public class MyView extends AbstractView {
    //重写renderMergedOutputModel方法,将输入数据转换为JSON格式
	@Override
    protected void renderMergedOutputModel(Map<String, Object> map, HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws Exception {
        JSONObject jsonObject = new JSONObject();
        jsonObject.putAll(map);
        ByteArrayOutputStream bas = new ByteArrayOutputStream();
        bas.write(jsonObject.toJSONString().getBytes("utf-8"));
        httpServletResponse.setContentType("application/json;charset=UTF-8");
        httpServletResponse.setContentLength(bas.size());
        OutputStream os = httpServletResponse.getOutputStream();
        bas.writeTo(os);
        os.flush();
    }
}

这里需要引入阿里巴巴的fastjson,当然,jackson也行。

效果:

发布了109 篇原创文章 · 获赞 34 · 访问量 12万+

猜你喜欢

转载自blog.csdn.net/shuaicenglou3032/article/details/103756029