• 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();
            List<Comment> comments = commentService.selectAllComment();
            for(Comment com:comments){
                System.out.println(com.getC_text());
            }
            mav.addObject("msg",comments);
            mav.setViewName("textIndex.jsp");
            return mav;
        }
    }

    jsp页面代码

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    
        <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <base href="<%=basePath%>">
        
        <title>My JSP 'index.jsp' starting page</title>
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">    
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">
        <!--
        <link rel="stylesheet" type="text/css" href="styles.css">
        -->
      </head>
      
      <body>
      <c:forEach items="${msg}" var="com">
        ${com.getUid()}:${com.getC_text()}:${com.getC_date()}<br>
        </c:forEach>
      </body>
    </html>

    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 List<Comment> test(){
            List<Comment> comments = 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));
                }
            };
        }
  • 相关阅读:
    常见的五种App开发模式
    iOS提供的实用的属性和方法
    iOS开发思想
    iOS函数式编程
    iOS链式编程范例
    ios不起眼的错误
    iOS将汉字转成拼音
    ReactiveCocoa
    LuaViewSDK
    pycharm配置qtdesigner
  • 原文地址:https://www.cnblogs.com/Rong-Xiu/p/12742494.html
Copyright © 2020-2023  润新知