移动端项目-校友信息采集页面

一、项目需求

  单独的H5页面，针对移动端设备，通过表单采集数据以json文件传送到后台，表单内容包括：入学年份–>学历–>专业–>班级四级级联选择框，采集姓名、手机号、行业、工作单位、微信等输入框。并且设置相应的表单验证。当数据提交成功后，弹出提示框，并返回上一页。

二、问题与解决

  最主要的问题是四级级联表单的逻辑问题，以及json数据的提取。后台已经用python处理了相应的excel表格，生成了对应的json文件，前端的工作就是分级提取对应的数据填充到相应的select表单中。 　　 与之类似的级联，请参考如下：https://blog.csdn.net/jy02988278/article/details/78968997

  在这里只展示JS部分代码。首先，用ajax调用本地的json数据：

var url='./res/data.json'; $.post(url, function(res){ //console.log(res); var res1 = res.Year $.each(res1, function(index,element) { $('.year').append("<option value='" + index + "'>" + element.value + " </option>"); }); })

  Year为入学年份的key，value为该年份的数据数组。先为第一个表单填充年份数据。 　　当用户点击第一个表单选择时，开始生成第二个表单，学历表单。分别取到该年份相应的学历数组，如Gao、Zhuan、Ben、Yan分别代表高职、专科、本科、研究生学历。当判断该年份中，学历数组长度大于1时，则添加相应的学历option。

$("#sel1").change(function(){ //console.log($(this).val()); //获取当前（第一个）select的value值，即年份的索引值 yearId = $(this).val(); $('.edu').empty(); $('.major').empty(); $('.ban').empty(); $.post(url, function(res){ Gao = res.Year[yearId].Gao; Zhuan = res.Year[yearId].Zhuan; Ben = res.Year[yearId].Ben; Yan = res.Year[yearId].Yan; $('.edu').append("<option>---请选择---</option>"); if(Gao.length != 0){ $('.edu').append("<option value='" + 0 + "'>" + "高职" + " </option>"); } if(Zhuan.length != 0){ $('.edu').append("<option value='" + 1 + "'>" + "专科" + " </option>"); } if(Ben.length != 0){ $('.edu').append("<option value='" + 2 + "'>" + "本科" + " </option>"); } if(Yan.length != 0){ $('.edu').append("<option value='" + 3 + "'>" + "硕士" + " </option>"); } if(Yan.length != 0){ $('.edu').append("<option value='" + 3 + "'>" + "博士" + " </option>"); } }); })

再根据学历的索引值，确定出专业的选项：

$("#sel2").change(function(){ //获取当前（第二个）select的value值，即学历的索引值 eduId = $(this).val(); // console.log(eduId); $('.major').empty(); $('.ban').empty(); if(eduId == 0){ res3 = Gao; }else if(eduId == 1){ res3 = Zhuan; } else if(eduId == 2){ res3 = Ben; } else if(eduId == 3){ res3 = Yan; } // console.log(res3); $('.major').append("<option>---请选择---</option>"); $.each(res3, function(index,element) { $('.major').append("<option value='" + index + "'>" + element.value + " </option>"); }); })

最后再设置班级的选项即可。

$("#sel3").change(function(){ //获取当前（第三个）select的value值，即专业的索引值 majorId = $(this).val(); $('.ban').empty(); console.log(res3[majorId].ClassID); res4 = res3[majorId].ClassID // var res4 = res.Year[yearId].School[deptId].Major[majorId].ClassID; $('.ban').append("<option>---请选择---</option>"); $.each(res4, function(index,element) { $('.ban').append("<option value='" + index + "'>" + element.value + " </option>"); banId = index; }); })

  另外一个技术点是将表单提取的数据去空格后，通过键值对的形式存储并转化为字符串类型。这一步基本就是ajax的使用，全是基础，也是需要前端新手必须巩熟练使用的。

$.ajax({ type:"POST", url:"/InfoPushInterface", header:{ 'Content-Type':'application/x-www-form-urlencoded' }, data:{ "stu_info":JSON.stringify(jsondata) }, dataType: "text", success: function (result) { var res = JSON.parse(result); var statusCode = res["StatusCode"]; var statusMsg = res["StatusMsg"]; if(statusCode === "200"){ console.log("statusCode =",statusCode); console.log("statusMsg =",statusMsg); // alert("您已提交成功！"); addlog(); } else if(statusCode === "400"){ alert("很抱歉，服务器正忙"); //addlog(); console.log("statusCode =",statusCode); console.log("statusMsg =",statusMsg); } }, error: function (result) { alert("提交信息失败！"); }, });

注意：addlog()是自定义的弹框方法。 其余的基本就是样式的设置，一些UI框架的使用了。 下面贴一张效果图：

  由于没有使用比较好看的UI框架，所以。。。效果有点土。楼主作为一个前端入门学习者，有机会做这样一个典型的表单提交页面，很是激动。   下一步继续总结问题，掌握一些最新的轻量级框架，尤其是vue.js用的非常多。加油。