调查问卷动态生成的一点探索 博客分类： Java编程jsonjqueryjavascript jqueryjsonspring restfulmango dbajax
程序员文章站
2024-03-23 09:14:10
...
之前做过企业内部用的调查问卷系统,因为每一年的调查内容都有差异,所以每次都要重新修改代码,所以想到了能否用程序做一个自动问卷生成系统.
大体的思路如下:
1>一套基于web的后台问卷生成系统,通过web页面录入具体的调查问卷(问题,答案,单选还是多选,还是文字回答等等),生成的问卷以json的方式ajax提交给后台系统,后台可以利用spring rest的方式接收request,然后将json串存入mango db
2>调查参与者根据收到的url,访问调查问卷系统(后台返回json串,前端负责显示具体的调查页面),参与具体的调查,并提交调查结果,同样也是通过json串向后台发起rest请求,然后后台将json串存入mango db
相关技术:
jquery,javascript,css,html
spring boot, spring restful, spring mvc
mango db
试验性代码如下
1>后台调查问卷生成
survey.html
<html> <head> <title>Create Survey</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="application/javascript" src="js/jquery-3.1.1.min.js"></script> <script type="application/javascript" src="js/survey.js"></script> <link rel="stylesheet" href="css/survey.css" /> </head> <body> <form> <div class="titlebox">Give a title to your survey</div> <div> <textarea name="title" id="title" placeholder="Survey Title" rows="3" cols="40"></textarea> </div> <div> <textarea name="question" id="question" placeholder="Question 1" rows="3" cols="40"></textarea> </div> <div> <div> <input type="text" name="answer" id="answer" placeholder="Answer 1" size="50" /> </div> <div class="autoadd"> <input type="text" name="answer" id="answer" placeholder="Answer 2" size="50" /> </div> </div> </form> <input type="button" id="addquestion" name="addquestion" value="Add Question" /> <input type="button" id="submit" name="submit" value="Create Survey" /> </body> </html>
survey.js
$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
function addanswer(){
if(typeof($(this).next().html()) != "undefined") {
return;
}
var answerNo = $(this).parent().find("input").length + 1;
var answer = "<div class=\"autoadd\"><input type=\"text\" name=\"answer\" \
id=\"answer\" placeholder=\"Answer " + answerNo + "\" size=\"50\" /></div>";
$(this).after(answer);
alert(answer);
setautoadd();
}
function createsurvey(){
alert($("#title").val());
$("form").each(function(){
$(this).find("#title").val($("#title").val());
var jsonuserinfo = $(this).serializeObject();
alert(jsonuserinfo);
alert(JSON.stringify(jsonuserinfo));
doAjax(JSON.stringify(jsonuserinfo));
});
}
function setautoadd() {
$(".autoadd").bind("paste keypress", addanswer);
}
function setevent() {
$("#submit").click(createsurvey);
$("#addquestion").click(function(){
var qNo = $("form").length + 1;
alert("qNo:" + qNo);
var quan = "<form> \
<div style=\"display:none\"> \
<textarea name=\"title\" id=\"title\" placeholder=\"Survey Title\" rows=\"3\" cols=\"40\"></textarea> \
</div> \
<div> \
<textarea name=\"question\" id=\"question\" placeholder=\"Question " + qNo + "\" rows=\"3\" cols=\"40\"></textarea> \
</div> \
<div> \
<div> \
<input type=\"text\" name=\"answer\" id=\"answer\" placeholder=\"Answer 1\" size=\"50\" /> \
</div> \
<div class=\"autoadd\"> \
<input type=\"text\" name=\"answer\" id=\"answer\" placeholder=\"Answer 2\" size=\"50\" /> \
</div> \
</div> \
</form>";
alert(quan);
$("form").last().after(quan);
setautoadd();
});
}
$(document).ready(function(){
setautoadd();
setevent();
});
function success(data, textStatus, jqXHR){
alert("success" + data);
}
function doAjax(data){
var url = 'http://localhost:8080/greeting';
alert("data:" + data);
$.ajax({
type: 'post',
url: url,
contentType:'application/json;charset=UTF-8',
data: data,
success: success,
dataType: 'text'
});
}
survey.css
body {
margin : 50px;
background-color : #CDBA96;
}
div {
margin : 5px;
}
.titlebox {
font-weight:bold;
}
2>前台调查页面生成
surveysheet.html
<html> <head> <title>Survey Sheet</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="application/javascript" src="js/jquery-3.1.1.min.js"></script> <script type="application/javascript" src="js/surveysheet.js"></script> <link rel="stylesheet" href="css/surveysheet.css" /> </head> <body> <form> <div id="sheet"> </div> </form> <input type="button" id="submit" name="submit" value="Submit Survey" /> </body>
surveysheet.js
function submitsurvey() {
}
$(document).ready(function(){
$("#submit").click(submitsurvey);
alert("ready");
var jsonStr = '[{\
"title" : "survey",\
"question_no" : "1",\
"question" : "which fruit do you like?",\
"answer" : ["apple","orange","banana"],\
"answer_type" : "single"\
},\
{\
"title" : "survey",\
"question_no" : "2",\
"question" : "which color do you like?",\
"answer" : ["yellow","red","green"],\
"answer_type" : "free"\
}]';
alert(jsonStr);
var jsonObj = $.parseJSON(jsonStr);
//alert(jsonObj);
var sheetStr = '';
$.each(jsonObj, function(i,value){
if(i == 0){
sheetStr += "<div>" + value.title + "</div>";
}
sheetStr += "<div>" + value.question_no + ". " + value.question + "</div>"
$.each(value.answer, function(k,v){
if(value.answer_type == "single"){
sheetStr += "<div><input type=\"radio\" name=\"answer\" value=\"" + k + "\">" + v + "</input></div>";
} else {
sheetStr += "<div><input type=\"checkbox\" name=\"answer\" value=\"" + k + "\">" + v + "</input></div>";
}
});
});
alert(sheetStr);
$("#sheet").html(sheetStr);
});
App.java
package prd.survey;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
/**
* Hello world!
*
*/
@SpringBootApplication
public class App
{
public static void main( String[] args )
{
SpringApplication.run(App.class, args);
}
}
SurveyController.java
package prd.survey;
import java.util.concurrent.atomic.AtomicLong;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class SurveyController {
private static final String template = "Hello, %s!";
private final AtomicLong counter = new AtomicLong();
@RequestMapping(value="/greeting", method = RequestMethod.POST,consumes = "application/json")
public Greeting greeting(@RequestBody String body) {
System.out.println("body:" + body);
return new Greeting(counter.incrementAndGet(),
String.format(template, "John"));
}
}
Greeting.java
package prd.survey;
public class Greeting {
private final long id;
private final String content;
public Greeting(long id, String content) {
this.id = id;
this.content = content;
}
public long getId() {
return id;
}
public String getContent() {
return content;
}
}
页面效果如下:
