根据json 动态生成页面——问卷页面

待我称王封你为后i 2023-01-01 04:54 141阅读 0赞

### 后台向前端传递的json串 ###

{
        "groups":[
            {
                "group":[
                    {
                        "answer":[
                            "北京市",
                            "天津市",
                            "河北省",
                            "山西省",
                            "内蒙古自治区",
                            "辽宁省"
                        ],
                        "title":"请选择最想就读大学的省份",
                        "type":"Check",
                        "minchoose":2,
                        "required":"1"
                    },
                    {
                        "answer":[
                            "北京",
                            "上海",
                            "天津",
                            "重庆",
                            "南京"
                        ],
                        "title":"请选择最想就读大学的城市",
                        "type":"Check",
                        "minchoose":2,
                        "required":"1"
                    }
                ],
                "title":"下面的每一个问题，请针对自己实际情况作出选择"
            }
        ],
        "title":"了解择校地域倾向",
        "description":"xxxxxxxxxx",
        "ending":"xxxxxxxxxx"
    }

### 根据json串形成页面 ###

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta charset="utf-8" />
        <title>问卷调查</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <link rel="stylesheet" href="/Resources/Libs/Mui/css/mui.min.css" />
        <link rel="stylesheet" type="text/css" href="/Resources/Libs/Mui/css/app.css" />
        <script src="/Resources/Libs/Jquery/1.8.3/jquery.js" type="text/javascript"></script>
        <script src="/Resources/Libs/Mui/js/mui.js"></script>
        <style>
            h5 {
                margin: 5px 7px;
            }
        </style>
    </head>
    <body>
        <header class="mui-bar mui-bar-nav" id="headtitle">
        </header>
        <div class="mui-content">
            <div class="mui-card">
                <div id="headdescription" class="mui-card-content">
                </div>
            </div>
            <div class="mui-card">
                <form id="form1" class="mui-input-group">
                    <div class="mui-button-row">
                        <button type="button" class="mui-btn mui-btn-primary">确认</button>            
                    </div>
                </form>
            </div>
        </div>

### 实现效果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70]: /images/20221120/c2e91030f94042b2a4c73baaff23c94a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201231151828174.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx,size_16,color_FFFFFF,t_70