用ajax提交form表单及乱码问题

要求

1. form里是习题和选择的答案包含内容较多，直接用ajax获取页面元素较多，麻烦。

2. 也不能直接用form提交，form提交后会跳转页面，如果出错想在本页面获取错误信息（ajax提交）且保存用户选择的答案，不用重复作答。

问题

1. 将form表单中提交的内容转给ajax提交。

2. 获取哪道题没做（上篇已解决）。

3. 需要替换form中参数的部分内容。

4. ajax 提交中文到后台是乱码。

解决

1. 用jquery的 var str = $("form").serialize(); 方法获得form提交的内容。

3. 用js的replace（）方法，可以用正则表达式匹配，str = str.replace(/&optionId\d{1,3}/g, "&optionId"); 这里是将&option1，&option2等 替换成&option（因为后台接收的对象里包含的option是个数组）

4. 用js的encodeURL（）方法，将中文编码两次，第一次var str = $("form").serialize(); 的str已经是编码一次的了，还需encodeURI(str)一次。

 

页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<div class="u_main fr">
    <div class="u_i_detail bodr u_height">
        <div class="u_hd">
            <h3>投资者风险评估</h3>
        </div>
        <div class="fx_pg">
            <form id="riskEvauationSubmit">

                <div class="pg_tit" align="center">
                    <h3>投资者风险评估测试</h3>
                </div>
                <div class="pg_tit">${riskEvaluation }</div>

                <c:forEach items="${list}" var="risk" varStatus="status">
                    <div class="pg_item">
                        <div class="pgt_bt">
                            ${status.index+1}、<input type="text" name="title"
                                value="${risk.title }" /> <input type="hidden" name="stemId"
                                value="${risk.id }" /> <input type="hidden" name="type"
                                value="${risk.type }" />
                        </div>
                        <c:forEach items="${risk.option}" var="option"
                            varStatus="optionStatus">
                            <label class="pgt_list"> <c:if test="${risk.type == 1}">

                                    <input type="radio" name="optionId${status.index}" /* redio每道题的name不能一样 要不然就是同一个redio了 */
                                        class="optionId${status.index+1}" value="${option.id}">${option.content}
                        
                    </c:if> <c:if test="${risk.type == 2}">

                                    <input type="checkbox" name="optionId${status.index}"
                                        class="optionId${status.index+1}" value="${option.id}">${option.content}
                        
                    </c:if>
                            </label>
                        </c:forEach>
                    </div>
                </c:forEach>
                <div class="pg_butt">
                    <input id="submit" class="isave" value="立即评测"> <input
                        type="text" id="uuid" name="uuid" value="${uuid}" hidden="hidden" />
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function() {
        $("#menu_loaningInvest").attr("class", "z_cur");

    })

    $("#submit")

            .click(
                    function() {
                        var count = parseInt("${count}");

                        for (var i = 1; i <= count; i++) {
                            var flag = false;
                            if ($("input[class='optionId" + i + "']:checked").length > 0) {
                                flag = true;
                            }

                            if (flag == false) {
                                alert("第 " + i + " 题未作答，请选择答案！");
                                return false;
                            }
                        }
                        var str = $("form").serialize();
                        str = str.replace(/&optionId\d{1,3}/g, "&optionId");
                        $
                                .post(
                                        "${pageContext.request.contextPath}/riskAssessment/saveRiskEvaluation?"
                                                + encodeURI(str),
                                        function(data) {
                                            if (data.code == 1) {
                                                window.location.href = '../riskAssessment/riskEvaluationResult';
                                            } else if (data.code == 0) {
                                                alert("请勿重复点击，多次提交。");
                                                $("#uuid").val(data.msg);
                                            } else {
                                                alert(data.msg);
                                            }
                                        });
                    })
</script>

后台接收的springMVC controller

@ResponseBody
    @RequestMapping("/saveRiskEvaluation")    
    public ErrorInfo saveRiskEvaluation(HttpServletRequest request, RiskEvaluation riskEvaluation,String uuid){
        
        ErrorInfo error = new ErrorInfo();
        int result = 0;
        Users user = userService.currentUser(request);
        
        //uuid防重复提交
        if(!captchaUtil.checkUUID(uuid)){
            String uuidNew = captchaUtil.getUUID();
            error.code = 0;
            error.msg=uuidNew;
            return error;
        }
        
        try {
            result = riskEvaluationService.saveRiskEvaluation(riskEvaluation,user);
        } catch (HandleException e) {
            error.code = -1;
            error.msg="网络异常，请稍后重试";
            return error;
        }
        
        if(result <= 0){
            error.code = -1;
            error.msg="网络异常，请稍后重试";
            return error;
        }
        error.code = 1;
        return error;
    }

接收前台传过值的model

public class RiskEvaluation {
    
    private String title[];        //题干 form里的name都一样
    
    private String stemId[];    //题干id
    
    private String optionId[];    //选项id 这是为什么传过来的optionId1，optionId2都必须是optionId
    
    private String type[];        //题目类型

    public String[] getStemId() {
        return stemId;
    }

    public void setStemId(String[] stemId) {
        this.stemId = stemId;
    }

    public String[] getType() {
        return type;
    }

    public void setType(String[] type) {
        this.type = type;
    }

    public String[] getTitle() {
        return title;
    }

    public void setTitle(String[] title) {
        this.title = title;
    }

    public String[] getOptionId() {
        return optionId;
    }

    public void setOptionId(String[] optionId) {
        this.optionId = optionId;
    }

}

后台解码

title = java.net.URLDecoder.decode(title_arr[i],   "utf-8");