Play框架实现ajax异步提交问卷调查

现在有一个需求：要填写一份问卷调查，用户每点击一个选项都要异步将信息保存到后台，并且在再一次访问时需要能够显示前面填写过的数据，用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还很薄弱，接下来好好钻研一下。