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

一、项目需求

  单独的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用的非常多。加油。