spring mvc ajax html页面,SpringMVC后端返回数据到前端代码示例

1.返回ModelAndView对象(.jsp)

controller代码：

package controller;

import java.util.List;

import javax.annotation.Resource;

import model.Comment;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.stereotype.Service;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.servlet.ModelAndView;

import service.CommentService;

@Controller

//@RequestMapping("comment")

public class CommentController {

@Resource private CommentService commentService;

@RequestMapping(value="showComments")

public ModelAndView test(){

ModelAndView mav = new ModelAndView();

Listcomments = commentService.selectAllComment();

for(Comment com:comments){

System.out.println(com.getC_text());

}

mav.addObject("msg",comments);

mav.setViewName("textIndex.jsp");

return mav;

}

}

jsp页面代码

My JSP 'index.jsp' starting page

${com.getUid()}:${com.getC_text()}:${com.getC_date()}

2.返回JSON数据到html页面

利用ajax接收数据

ajax({

method:'post',

url:'http://localhost:8080/graduate/showComments.do',

data:'null',

success:function(response){

console.log(response);

}

})

controller

@Controller

//@RequestMapping("comment")

public class CommentController {

@Resource private CommentService commentService;

@RequestMapping(value="showComments")

@ResponseBody

public Listtest(){

Listcomments = commentService.selectAllComment();

for(Comment com:comments){

System.out.println(com.getC_text());

}

return comments;

}

}

3.顺便记录一下原生ajax,方便以后使用

function ajax(opt) {

opt = opt || {};

opt.method = opt.method.toUpperCase() || 'POST';

opt.url = opt.url || '';

opt.async = opt.async || true;

opt.data = opt.data || null;

opt.success = opt.success || function () {};

var xmlHttp = null;

if (XMLHttpRequest) {

xmlHttp = new XMLHttpRequest();

}

else {

xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');

}var params = [];

for (var key in opt.data){

params.push(key + '=' + opt.data[key]);

}

var postData = params.join('&');

if (opt.method.toUpperCase() === 'POST') {

xmlHttp.open(opt.method, opt.url, opt.async);

xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');

xmlHttp.send(postData);

}

else if (opt.method.toUpperCase() === 'GET') {

xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);

xmlHttp.send(null);

}

xmlHttp.onreadystatechange = function () {

if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {

opt.success(JSON.parse(xmlHttp.responseText));

}

};

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。