移动web开发之菜鸡写的调查问卷

一、这是干啥的

老师布置的作业，让写一个移动web的调查问卷

题目自己设计，但是表单提交要用ajax。然后中间还设计到了json的传值，中间踩了不少坑。

二、贴代码

1、web.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>

    </welcome-file-list>
    <filter>
        <filter-name>struts2</filter-name>
        <filter-class>org.apache.struts2.dispatcher.filter.StrutsPrepareAndExecuteFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>struts2</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>

2、struts.xml文件

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE struts PUBLIC
        "-//Apache Software Foundation//DTD Struts Configuration 2.5//EN"
        "http://struts.apache.org/dtds/struts-2.5.dtd">
<struts>
    <package name="work3"  namespace="/" extends="struts-default, json-default">
        <action name="dopostOne" class="action.DoPostOne">
            <result type="json">
                <param name="root">r</param>
            </result>
        </action>
    </package>
</struts>

3、三个java类，分别是两个对象和一个action类

第一个，action处理类，随便起的名字，DoPostOne.java

package action;

import com.opensymphony.xwork2.ActionSupport;
import com.opensymphony.xwork2.ModelDriven;
import org.apache.struts2.ServletActionContext;

public class DoPostOne extends ActionSupport implements ModelDriven {
    private Qs qs = new Qs();
    private Result r;
    @Override
    public Object getModel() {
        return qs;
    }

    public Result getR() {
        return r;
    }

    public void setR(Result r) {
        this.r = r;
    }

    public String execute(){

        if ( ServletActionContext.getServletContext().getAttribute( "result" ) != null ){
            r = (Result) ServletActionContext.getServletContext().getAttribute( "result" );
            r.setQs(qs);
            //System.out.println( "Application有\t" + r.getSize());
        }else{
            r = new Result(qs);
            //System.out.println( "Application没有" );
        }

        //将总的结果存储在application中
        ServletActionContext.getServletContext().setAttribute( "result", r );

        return SUCCESS;
    }
}

第二个和第三个对象类，省去了get和set方法

package action;

import java.util.ArrayList;

public class Result{
    private int size;
    private int[] q1;
    private int[] q2;
    private int[] q3;
    private ArrayList<String> q17;

    public Result(){
        size = 0;
        q1 = new int[4];
        q2 = new int[7];
        q3 = new int[5];
        q17 = new ArrayList<String>(10);
    }

    public Result( Qs qs ){
        size = 0;
        q1 = new int[4];
        q2 = new int[7];
        q3 = new int[5];
        q17 = new ArrayList<String>(10);

        setsSize();
        setsq1(qs.getQ1());
        setsq2(qs.getQ2());
        setsq3(qs.getQ3());
        setsq17(qs.getQ17());
    }

    public void setQs( Qs qs ){
        setsSize();
        setsq1(qs.getQ1());
        setsq2(qs.getQ2());
        setsq3(qs.getQ3());
        setsq17(qs.getQ17());
    }

    public void setsSize() {
        this.size +=1;
    }

    public void setsq1(String q) {
        switch ( q ){
            case "q11":
                q1[0] +=1;
                break;
            case "q12":
                q1[1] +=1;
                break;
            case "q13":
                q1[2] +=1;
                break;
            case "q14":
                q1[3] +=1;
                break;
        }
    }
    public void setsq2(String[] qs) {
        if ( qs == null )
            return;
        for ( String q : qs ){
            switch ( q ){
                case "q21":
                    q2[0] +=1;
                    break;
                case "q22":
                    q2[1] +=1;
                    break;
                case "q23":
                    q2[2] +=1;
                    break;
                case "q24":
                    q2[3] +=1;
                    break;
                case "q25":
                    q2[4] +=1;
                    break;
                case "q26":
                    q2[5] +=1;
                    break;
                case "q27":
                    q2[6] +=1;
                    break;
            }
        }
    }
    public void setsq3(String q) {
        switch ( q ){
            case "q31":
                q3[0] +=1;
                break;
            case "q32":
                q3[1] +=1;
                break;
            case "q33":
                q3[2] +=1;
                break;
            case "q34":
                q3[3] +=1;
                break;
            case "q35":
                q3[4] +=1;
                break;
        }
    }
    public void setsq17(String q) {
        if ( q != null && q != "" && !q.equals(""))
            q17.add(q);
    }
}

package action;

public class Qs {
    private int id;
    private String q1;
    private String[] q2;
    private String q3;
    private String q17;
}

4、网页代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>主修专业满意度调查</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入 jQuery Mobile 样式 -->
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <!-- 引入 jQuery 库 -->
    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <!-- 引入 jQuery Mobile 库 -->
    <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#submit").click(function(){
                $.ajax({
                    type: "POST",
                    url: "dopostOne",
                    data: $('#form1').serialize(),
                    async: false,
                    success : function(data) {

                        var d = eval(data);
                        $("#result").text(d.size);
                        $("#r11").text(d.q1[0]);
                        $("#r12").text(d.q1[1]);
                        $("#r13").text(d.q1[2]);
                        $("#r14").text(d.q1[3]);

                        $("#r21").text(d.q2[0]);
                        $("#r22").text(d.q2[1]);
                        $("#r23").text(d.q2[2]);
                        $("#r24").text(d.q2[3]);
                        $("#r25").text(d.q2[4]);
                        $("#r26").text(d.q2[5]);
                        $("#r27").text(d.q2[6]);

                        $("#r31").text(d.q3[0]);
                        $("#r32").text(d.q3[1]);
                        $("#r33").text(d.q3[2]);
                        $("#r34").text(d.q3[3]);
                        $("#r35").text(d.q3[4]);

                        var s="";
                        for ( var i = 0; i < d.q17.length; i++ ){
                            s+="<li>"+d.q17[i]+"</li>";
                        }
                        $("#r17").append(s);
                    },
                    error : function() {
                        alert("系统异常，请稍后重试！");
                    }
                });
            });

        });
    </script>

</head>
<body>
<div id="page1" data-role="page">
    <div data-role="header">
        <h1>主修专业满意度调查</h1>
    </div>
    <div data-role="content">

        <form id="form1" >
            <fieldset data-role="controlgroup">
                <legend>Q1：请问您目前是：（单选）</legend>
                <label for="q11">大一学生</label>
                <label for="q12">大二学生</label>
                <label for="q13">大三学生</label>
                <label for="q14">大四学生</label>
                <input type="radio" name="q1" id="q11" value="q11"/>
                <input type="radio" name="q1" id="q12" value="q12"/>
                <input type="radio" name="q1" id="q13" value="q13"/>
                <input type="radio" name="q1" id="q14" value="q14"/>
            </fieldset>
            <fieldset data-role="controlgroup">
                <legend>Q2：您为什么会选择目前就读的专业呢？（多选）</legend>
                <label for="q21">父母的意愿</label>
                <label for="q22">自己的兴趣爱好</label>
                <label for="q23">毕业后就业率高</label>
                <label for="q24">当时的热门专业</label>
                <label for="q25">填志愿的时候接受调剂</label>
                <label for="q26">其他亲友的建议</label>
                <label for="q27">其他</label>
                <input type="checkbox" name="q2" id="q21" value="q21"/>
                <input type="checkbox" name="q2" id="q22" value="q22"/>
                <input type="checkbox" name="q2" id="q23" value="q23"/>
                <input type="checkbox" name="q2" id="q24" value="q24"/>
                <input type="checkbox" name="q2" id="q25" value="q25"/>
                <input type="checkbox" name="q2" id="q26" value="q26"/>
                <input type="checkbox" name="q2" id="q27" value="q27"/>
            </fieldset>
            <fieldset data-role="controlgroup">
                <legend>Q3：您报考前对此专业有多少了解？（单选）</legend>
                <label for="q31">非常了解</label>
                <label for="q32">比较了解</label>
                <label for="q33">一般</label>
                <label for="q34">比较不了解</label>
                <label for="q35">非常不了解</label>
                <input type="radio" name="q3" id="q31" value="q31"/>
                <input type="radio" name="q3" id="q32" value="q32"/>
                <input type="radio" name="q3" id="q33" value="q33"/>
                <input type="radio" name="q3" id="q34" value="q34"/>
                <input type="radio" name="q3" id="q35" value="q35"/>
            </fieldset>
            <fieldset data-role="controlgroup">
                <legend>Q17：那么您最希望转读的专业是？请写在下方</legend>
                <input type="text" id="q17" name="q17"/>
            </fieldset>
            <a href="#page2" id="submit" data-role="button">提交</a>
        </form>
    </div>
    <div data-role="footer">
        <h4>谢谢答题！</h4>
    </div>
</div>

<!--第二个界面，显示结果-->
<div id="page2" data-role="page">
    <div data-role="header">
        <h1>主修专业满意度调查</h1>
    </div>
    <div data-role="content">
        <h3>截至目前一共<span id="result">0</span>人填写了问卷！</h3>
        <ul data-role="listview">
            <li>Q1：请问您目前是：（单选）</li>
            <ul>
                <li>大一学生：<span id="r11">0</span>人</li>
                <li>大二学生：<span id="r12">0</span>人</li>
                <li>大三学生：<span id="r13">0</span>人</li>
                <li>大四学生：<span id="r14">0</span>人</li>
            </ul>
            <li>Q2：您为什么会选择目前就读的专业呢？（多选）</li>
            <ul>
                <li>父母的意愿：<span id="r21">0</span>人</li>
                <li>自己的兴趣爱好：<span id="r22">0</span>人</li>
                <li>毕业后就业率高：<span id="r23">0</span>人</li>
                <li>当时的热门专业：<span id="r24">0</span>人</li>
                <li>填志愿的时候接受调剂：<span id="r25">0</span>人</li>
                <li>其他亲友的建议：<span id="r26">0</span>人</li>
                <li>其他：<span id="r27">0</span>人</li>
            </ul>
            <li>Q3：您报考前对此专业有多少了解？（单选）</li>
            <ul>
                <li>非常了解：<span id="r31">0</span>人</li>
                <li>比较了解：<span id="r32">0</span>人</li>
                <li>一般：<span id="r33">0</span>人</li>
                <li>比较不了解：<span id="r34">0</span>人</li>
                <li>非常不了解：<span id="r35">0</span>人</li>
            </ul>
            <li>Q17：那么您最希望转读的专业是？请写在下方</li>
            <ul id="r17"></ul>
        </ul>
    </div>
    <div data-role="footer">
        <h4>欢迎使用老王牌调查文件</h4>
    </div>
</div>
</body>
</html>

5、jar包

用的是struts框架

三、思路

大致的想法就是前端把数据提交给后台，然后利用框架直接封装成一个对象类

再然后就把这个对象类每一条处理一下存在另一个对象类中（这个对象是用来放调查问卷的结果）偷懒直接把这个对象放在了application中，也没有详细的处理，然后就这了。

四、中间遇到的坑

1、这个也不太算是坑，毕竟没错，大约就是刚开始在后台处理结果的时候没想到用框架直接封装成对象，闲着没事玩起了request.getParameter()简直是想不开。之后突然发现可以用框架封装，简直就是打开了新世界的大门。
2、表单提交的时候原来的form表单不要设置action、method什么都不要设置，不然还是原生的表单提交，辛辛苦苦弄得ajax就没得玩了。
3、另外就是在返回结果的时候返回json数据的坑，这个是相当的头秃；

• jar包不能错，错了就没得玩了，刚开始就是少了几个jar包，找不到问题所在，百度也没有，最后不知道咋想不开了核对了一下jar包发现少了几个。网上别的项目给的jar包也是乱七八糟的，我的对不对我也不清楚，至少目前是能用。
• jar包没问题了，就是你在把对象转json的时候记得把每一个属性都设置上get方法，不然分分钟报错给你看。
• 用以下的代码可以将一个对象转换成json格式的字符串，然鹅没一点卵用。直接在action中设置返回类型就可以自动转换，详情看第二个代码段。其中要注意的就是name属性说的是必须是root能不能是别的我没有试过，谁闲着没事可以去试试。
• var d = eval(data)这几个代码可以将返回的data数据匹配成正确的json格式的数据，原理是啥不知道，没有详细研究过js，我输出的时候试过，不用这句话输出的是undefined用了就变成[object,object]。
• 在前端的记得加上第三个代码段，不然在手机端还是非常的不友好，对不起移动web开发的称号，然后就是我测试的时候发现一切都没有问题，然鹅就是在电脑端的浏览器不能运行成功，手机端的没一点问题。问题就是在多的这句话上面。

JSONObject jsonObject = JSONObject.fromObject(r);// 将map对象转换成json类型数据
String result = jsonObject.toString();// 给result赋值，传递给页面

<result type="json">
    <param name="root">r</param>
</result>

<meta name="viewport" content="width=device-width, initial-scale=1">