Play框架实现ajax异步提交问卷调查
来源:互联网 发布:apache编译安装参数 编辑:程序博客网 时间:2024/05/29 14:59
现在有一个需求:要填写一份问卷调查,用户每点击一个选项都要异步将信息保存到后台,并且在再一次访问时需要能够显示前面填写过的数据,用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还很薄弱,接下来好好钻研一下。
0 0
- Play框架实现ajax异步提交问卷调查
- AJAX实现异步提交
- 使用ssm框架 通过ajax异步提交数据具体实现方法
- ajax文件异步提交的实现
- ajax文件异步提交的实现
- ajax中如何实现异步提交表单
- ajax实现表单的异步提交
- Play框架中的异步编程
- AJAX的异步提交
- ajax异步提交
- ajax异步提交form
- jquery ajax异步提交
- ajax提交异步验证
- ajax提交异步验证
- AJAX异步提交表单
- Ajax异步提交
- Ajax 异步提交方法
- ajax异步提交表单
- bzoj3351 [ IOI2009 ] -- 阈值
- VS2013配置OpenGL4.3及以上编程环境
- Codeforces Round #402 (Div. 2) D. String Game
- JAVA输入与输出
- Vue.js资料
- Play框架实现ajax异步提交问卷调查
- 服务器与客户端的实例整理
- 带表头结点的单向链表
- 设计模式之单例模式
- node.js socket.broadcast发不去的一个原因
- 【问题解决】XMLHttpRequest cannot load http://xxx.xxx No 'Access-Control-Allow-Origin'
- eclipse中 svn 安装与管理
- 130. Surrounded Regions\73. Set Matrix Zeroes
- 什么样的离开会让老板念念不忘