spring mvc+ajax 文件调查_springmvc 调查表-优快云博客

本文介绍了一种使用Ajax动态加载并提交调查问卷的方法。通过JavaScript实现问卷问题及选项的动态展示，并在用户选择答案后收集数据进行提交。具体包括初始化问卷页面、设置下拉选项及保存用户回答等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(function () {
    initQuestionnaireHtml();
});
var answers = [];

function initQuestionnaireHtml() {
    $.ajax({
        type: 'post',
        async: true,
        url: appPath.getRootPath() + "/survery/survery/getSurveryQuestion.do",
        dataType: "json",
        success: function (data) {
            if (data != null) {
                var dataHtml = "";
                for (var i = 0; i < data.length; i++) {
                    var question = data[i];
                    var answer = {
                        "surveryQuestionid": question.id,
                        "surveryQuestionnaireId": question.surveryQuestionnaireId,
                        "answer": ""
                    };
                    answers.push(answer);
                    //"'+question.id+'",
                    dataHtml += '<div class="form-group">' +
                        '<label class="col-md-4 control-label" style="font-size:12px;" id="' + question.id + '">' + question.question + '</label>';
                    dataHtml += '<div class="col-md-8">' +
                        '<select class="form-control" id="' + question.id + '" name="' + question.id + '" onchange="answerQuestion(this)">' +
                        '<option value="" selected>-------请选择-------</option>';
                    var options = question.options;
                    for (var j = 0; j < options.length; j++) {
                        var questionOptionData = options[j];
                        dataHtml += '<option value="' + questionOptionData.code + '">' + questionOptionData.content + '</option>';
                    }
                    dataHtml += '</select>';
                    dataHtml += '</div>';
                    dataHtml += '</div>';
                }

                dataHtml += '<div class="form-group">' +
                    '<div class="col-md-6">' +
                    '<button type="button" class="btn btn-primary" style="margin-left:300px" onclick="saveInfo()">确定</button>' +
                    '</div>' +
                    '<div class="col-md-6">' +
                    '<button type="submit" class="btn btn-primary ">取消</button>' +
                    '</div>' +
                    ' </div>';

                $("#edit_form").append(dataHtml);

            }
        },
        error: function () {
            alert('请求服务器出错！');
        }
    });
};

function answerQuestion(element) {
    for (var i = 0; i < answers.length; i++) {
        var answer = answers[i];
        var questionId = element.id;
        if (answer.surveryQuestionid == questionId) {
            answer.answer = element.value;
            break;
        }
    }
}

function saveInfo() {
    alert(JSON.stringify(answers));
    $.ajax({
        type: 'post',
        async: true,
        data:{"answersJson":JSON.stringify(answers)},
        url: appPath.getRootPath() + "/survery/survery/ajaxSubmit.do",
        dataType: "json",
        success: function (data) {

            if (data) {
                alert("提交调查问卷成功");
            }else{
                alert("提交调查问卷失败");
            }
        },
        error: function () {
            alert('请求服务器出错！');
        }
    });
}