现在有一个需求:要填写一份问卷调查,用户每点击一个选项都要异步将信息保存到后台,并且在再一次访问时需要能够显示前面填写过的数据,用Play框架如何实现。
首先想到的是需要用Ajax进行异步提交,接着想到前台要显示需要后台返回Json数据,最后还有一点是要让选择框变成被选中的状态需要写jq代码,总共三点。
前台Ajax异步提交
要给所有的单选框和复选框添加点击事件
<span class=""><input type="checkbox" id="21" name="surveyList[21].answer" value="2" class="checkboxchanged"/></span>
<span class=""><input type="checkbox" id="21" name="surveyList[21].answer" value="3" class="checkboxchanged"/></span>
<span class=""><input type="checkbox" id="21" name="surveyList[21].answer" value="4" class="checkboxchanged"/></span>
<span class=""><input type="checkbox" id="21" name="surveyList[21].answer" value="5" class="checkboxchanged"/></span>
<span class=""><input type="checkbox" id="21" name="surveyList[21].answer" value="6" class="checkboxchanged"/></span>
给他们添加一个class=”checkboxchanged”
Ajax如下:
var saveAction = #{jsAction @ajaxSaveSurvey/};
$('.checkboxchanged').click(function(){
var $check_boxes = $('input[type=checkbox][checked=checked][id!=check_all_box]');
$.ajax({
type:'post',
//traditional :true,
url:'ajaxSaveSurvey',
data:{'surveyList':$(this).val(),'number':$(this).attr("id")},
success:function(data){
}
});
return false;
});
将题号和number和选择的选项,以JSON格式返回后台
Play后台返回JSON数据
public static void ajaxSubcatalog(){
//获取用户
T_user user = T_user.findById(Long.parseLong(session.get("userid")));
// 查询数据库中用户的问卷
List<Survey> surveyList = Survey.find("byUser_id", user.id).fetch();
//将问卷保存在Map中,通过json返回
Map<String,String[]> surveyMap = new HashMap<String,String[]>();
if(surveyList == null){
//如果用户没有填写调查问卷
renderJSON(null);
}else{
//调查问卷不为空
for(Survey survey:surveyList){
//问卷的编号
int number = survey.number;
String _number = "number" + number;
//问卷已经填写的题号
String[] answer = survey.answer.split(",");
//将编号和题号放入到map中
surveyMap.put(_number, answer);
}
renderJSON(surveyMap);
}
}
前台对后台返回JSON数据解析
<!--异步显示-->
var listAction = #{jsAction @ajaxSubcatalog/};
function ajax(){
$.ajax({
type : "POST",
url : 'ajaxSubcatalog',
success : function(result) {//返回数据根据结果进行相应的处理
for(var obj in result) {
var arr = result[obj].toString().split(",");
for(var i = 0 ; i < arr.length; i++){
var number = obj.slice(6);
var num=parseInt(number);
if(num==5||num==6||num==7||num==8||num==19||num==20)
$('input[id='+number+'][ value='+arr[i]+']').parent().addClass("check");
else
$('input[id='+number+'][ value='+arr[i]+']').parent().css({backgroundPosition:"0 -34px"});
}
}
}
});
}
关键在利用JQ的标签选择,用选择框的id和value唯一确定一个input标签,然后再获取input标签的上一层span标签,为其添加选中的样式即可。
js还很薄弱,接下来好好钻研一下。