Ajax请求的使用 后台servlet中获取Ajax的内容 Vue双重循环输出绑定动态model 前台获取多对多对象

    在做一个问卷调查的Demo中，遇到需要从后台获取多个问题，并且每个问题，每个问题有多个选项的情况。

在这里总结一下，在前台使用Vue，

后台使用servlet的情况下，如何获取到整个问卷的问题以及选项并展示在页面中, 以及填报完成后将问卷填写结果存入数据库。

    注意点：1.这里在前台使用的是vue。

                 2.后台有部分类是自定义的、sql是根据映射生成的。

                 3.主要讲前台Ajax如何使用和JSONObject以及JSONArry如何使用，Vue中v-for中动态绑定model。

                 4.使用JSONObject和JSONArry需要jar包，自行百度。

有问题请留言，写得不好的地方请提出来，谢谢浏览。

前台在Vue中使用Ajax请求

1.    获取所有问题以及每个问题的选项

getQue(datas) {

//ajax中的this不是controller中的this的作用域，所以需要用一个变量代替

    let _self = this;let jsonObject = {
        id: datas.id + ""    //设置调查问卷的id
    };
    let data = JSON.stringify(jsonObject); //把json对象转换为字符串
    $.ajax({
        url: '../user',    //请求路径
        data: {
            'method': "getDetail",    //请求的方法
            'data': data
        },
        type: 'GET',    //请求的类型
        success: function (data) {
            var getData = JSON.parse(data);    //解析数据
            _self.tableData = getData    //将数据问题展示在页面
            _self.questionsId = []    //将储存选择结果的数组设置为空
            _self.tableData.forEach((item) => {
                _self.questionsId.push({id: item.id}); //为每个问题设置属性id
            })
            console.log(data)
        },
        error: function (data) {
            console.log(data)
        }
    });
}

2.    用双重循环将问题以及答案输出到页面（已删除左右css样式）

<!--外层循环输出问题-->

 <div v-for="(item, index) in tableData">

{{index + 1}}.&nbsp;{{item.question}}

<!--内层循环输出选项-->

<el-radio-group v-model="questionsId[index].choose">

    <span v-for="options in item.options">

    <el-radio :label="options.option">{{options.option}}</el-radio>

</span>

</el-radio-group>

</div>

        

后台在Servlet中返回数据

String method = new String(request.getParameter("method"));
response.setContentType("text/html;charset=UTF-8");

/**获取问卷题目信息*/
if("getDetail".equals(method)){

    //将前台传入的json字符串转换为JSONObject
    JSONObject inputData = JSONObject.fromString(new String(request.getParameter("data")));
    //SqlUtilDao为自己写的类（使用映射生成sql语句,返回的是Object类型）
    SqlUtilDao dao = new SqlUtilDaoImpl();
    ArrayList<Object> list;
    try {
        //获取问题
        list = dao.queryByCondition(new Question(), "queId", inputData.getInt("id"));
        JSONArray data = new JSONArray();
        for(int i = 0; i < list.size(); i++) {
            //将问题id和问题内容存入json对象数组
            JSONObject json = new JSONObject();
            json.put("id", ((Question)list.get(i)).getId());
            json.put("question", ((Question)list.get(i)).getQuestion());

            //获取每个问题的选项
            ArrayList<Object> optionList;
            optionList = dao.queryByCondition(new Option(), "questionId", ((Question)list.get(i)).getId());
            json.put("options", optionList);
            data.put(json);
        }
        response.getWriter().write(data.toString());
    } catch (IllegalAccessException e) {
        e.printStackTrace();
    } catch (SQLException e) {
        e.printStackTrace();
    }
}

问题以及选项返回示例：

[
    {
        "question": "你有每天坚持吃早饭吗？",
        "options": [
            {
                "questionId": 1,
                "id": 1,
                "option": "没有"
            },
            {
                "questionId": 1,
                "id": 2,
                "option": "有"
            }
        ],
        "id": 1
    },
    {
        "question": "你周围的人有吃早饭的习惯吗？",
        "options": [
            {
                "questionId": 2,
                "id": 3,
                "option": "有"
            },
            {
                "questionId": 2,
                "id": 4,
                "option": "没有"
            },
            {
                "questionId": 2,
                "id": 5,
                "option": "有一些"
            }
        ],
        "id": 2
    }
]

填报完成后将填报结果发送至后台

finish() {
    if(this.check()) {  //check()方法确定表单填报符合要求
        let _self = this;
        let jsonObject = {
            name: _self.name, //填报人姓名
            id: _self.queId,    //填报的问卷的id
            number : _self.number, //填报人电话
            answer: _self.questionsId //填报结果
        }
        let data = JSON.stringify(jsonObject);
        console.log(data)
        $.ajax({
            url: '../user',
            data: {
                'method': "submit",
                'data': data
            },
            type: 'POST',
            success: function (data) {
                alert("填报成功")
                console.log(data)
            },
            error: function (data) {
                console.log(data)
            }
        });
    }
    else
        alert("请填报完成")
}

填报结果示例

{
    "name": "Jack",
    "id": 1,
    "number": "13111111111",
    "answer": [
        {
            "id": 1,
            "choose": "有"
        },
        {
            "id": 2,
            "choose": "没有"
        }
    ]

}

提交填写结果

/**提交填写情况*/
if("submit".equals(method)){
    SqlUtilDao dao = new SqlUtilDaoImpl();
    JSONObject inputData = JSONObject.fromString(new String(request.getParameter("data")));
    Fill fill = new Fill();
    fill.setFilledAt((new java.text.SimpleDateFormat("yyyy-MM-dd HH:mm:ss")).format(new Date()));
    fill.setQueId(inputData.getInt("id"));
    fill.setName(inputData.getString("name"));
    fill.setNumber(inputData.getString("number"));
    //将填写结果存在JSONArry中
    JSONArray answers = JSONArray.fromString(inputData.getString("answer"));
    try {
        dao.add(fill);
        Integer fillId = dao.getLargestId(new Fill());
        for (int i = 0; i < answers.length(); i++) {
            Answer answer = new Answer();
            //获取JSONArry中的某个JSONObject再获取其中某个属性的值
            answer.setQuestionId(answers.getJSONObject(i).getInt("id"));
            answer.setFilledId(fillId);
            answer.setAnswer(answers.getJSONObject(i).getString("choose"));
            dao.add(answer);
        }
    } catch (IllegalAccessException e) {
        e.printStackTrace();
    } catch (SQLException e) {
        e.printStackTrace();
    }
}