使用 Spring MVC 访问 Javascript 中的模型属性

Posted 2023-02-26

【中文标题】使用 Spring MVC 访问 Javascript 中的模型属性

【英文标题】：Access to a model attribute in Javascript with Spring MVC

【发布时间】：2019-05-17 05:03:59

【问题描述】：

我在 javascript 中访问模型属性时遇到问题；特别是我有这个控制器：

    @RequestMapping(value = "/dashboard")
    public ModelAndView home(HttpServletRequest request, HttpServletResponse 
    res, Model model) 
        // Return answer's dictionary from DB to dashboard view
        CompQuest dizRisp = new CompQuest();
        dizRisp.setDizComp(dashDao.getRispEnd());
        model.addAttribute("dizRisp", dizRisp);

        return new ModelAndView("dashboard");    
    

我有这个 Javascript 文件（这里：只有我想要引用模型属性的图表的代码部分），我想从我的控制器访问模型属性“dizRisp”：

var ctx1 = document.getElementById('myChart1').getContext('2d');
var myRadarChart = new Chart(ctx1, 
    type: 'radar',
    data: 
        labels: ['Valori e identità del SCN', 'La cittadinanza attiva',
              'Il giovane volontario nel sistema del SC', 'Lavorare',
              'Prevenzione e protezione', 'Normativa sicurezza',
              'Rischi sulla salute in tema di ambiente'
        ],
        datasets: [
            label: "Civiche",
            data: [4, 5, 5, 2, 4, 5, 4],
            fill: true,
            borderJoinStyle: "round"
        ],
    ,
    options: 
        maintainAspectRatio: false,
        scale: 
            ticks: 
                stepSize: 1,
                step: 1,
                beginAtZero: true,
                max: 5
            
        
    
);

我的课程是（这里：没有 getter 和 setter）：

public class CompQuest 
private HashMap <String, CompRisp> dizComp;

public class CompRisp 
private ArrayList <Risposte> rispList = new ArrayList <Risposte> ();

public class Risposte 
int id;
Domande domande;
int valore;
int momento; 

public class Domande 
int id;
String testo;
String descrizione;
Questionario questionario; 

我的 .jsp 文件：

<meta charset="UTF-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js" ></script>
<script src="resources/dashboard.js" type="text/javascript"></script>
<link rel="stylesheet" href="$pageContext.request.contextPath/resources/dashboard.css">
<title>Dashboard</title>
<style>
    @import url('https://fonts.googleapis.com/css?family=Bitter|Roboto+Condensed');
    @import url('https://fonts.googleapis.com/css?family=Roboto');
</style>

我特别想访问我的模型属性 (Hashmap)，以便从包含我的数据库中的数据的 Hashmap 中放入我的 Javascript 图表值的标签和数据集字段。

提前感谢所有可以帮助我的人！

【参考方案1】：

弹簧控制器

    @RequestMapping(value = "/dashboard")
    public ModelAndView home(HttpServletRequest request, 
    HttpServletResponse 
    res, Model model) 

        // Return answer's dictionary from DB to dashboard view
        CompQuest dizRisp = new CompQuest();
        dizRisp.setDizComp(dashDao.getRispEnd());

        Gson gson = new Gson() ;
        // Use Gson dependency to convert hashmap to String

        String strmap = gson.toJson(dizRisp)
        model.addAttribute("dizRisp", strmap);

        return new ModelAndView("dashboard");    
    

Javascript

<script>
    
   $(document).ready(function()

    var element = JSON.parse('$dizRisp');

    $.each( element , function( key, value ) 
        
         console.log(key);
         console.log(value);

    );
  
   );
  

</script>

希望这是您努力实现的目标。

【讨论】：

评论不用于扩展讨论；这个对话是moved to chat。