用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");