jQuery Ajax驗證明例

除了jQuery validate 驗證外，咱們經常使用到的還有ajax異步驗證。其經常使用的基本格式和jQuery validate 差很少。

需求：

　　根據獲取到radiobuttons的最新值和輸入的cUserId的值來判斷記錄是否存在並進行相應處理。

 <div class="control-group">
        <label class="control-label">推送系統類型：</label>

        <div class="controls">
            <form:radiobuttons path="appType" items="${fns:getDictList('pushType')}" itemLabel="label" itemValue="value"
                               htmlEscape="false" class=""/>
        </div>
    </div>
 <div class="control-group">
            <label class="control-label">用戶ID：</label>

            <div class="controls">
                <input type="text" id="cUserId" name="cUserId" maxlength="100" class="input-xlarge"
                       onchange="checkUser()"/>
            </div>
        </div>

 

對應的ajax代碼以下：

 function checkUser() {
            $.ajax({
                url: '${ctx}/doctor/doctormsgpushy/find',
                type: 'post',
                dataType: "json",
                data: {
                    appType: function () {
                        return $('input:radio:checked').val();
                    },
                    cUserId: function () {
                        return $("#cUserId").val();
                    }
                },
                success: function (data) {
                    //成功時執行的代碼，執行成功無論返回json數據有沒有值

                },
                error: function (json) {
                    alert("查找失敗");
                }
            });                                        

　　data 表示的是後臺方法的返回值。

　　ajax異步驗證與validate的區別在於它的返回值必須是json數據，以下：

 @RequestMapping(value = "find")
    public JSON find(String cUserId, String appType) {
        DoctorGetuiBind doctorGetuiBind = new DoctorGetuiBind();
        doctorGetuiBind.setUserId(cUserId);
        if (appType.equals("0")) {
            doctorGetuiBind.setDeviceType("3");
        } else if (appType.equals("1")) {
            doctorGetuiBind.setDeviceType("4");
        }
        List<DoctorGetuiBind> doctorGetuiBindList = doctorGetuiBindService.findList(doctorGetuiBind);

        if (doctorGetuiBindList.size() > 0) {
            JSONArray json = new JSONArray();
            JSONObject js = null;

            for (int i = 0; i < doctorGetuiBindList.size(); i++) {
                js = new JSONObject();
                js.put("clientId", doctorGetuiBindList.get(i).getClientId());
                json.add(js);
            }
            String str = json.toString();
            return json;

        } else {
            return null;
        }
    }

　　我這裏是根據查找結果有多是多條數據，所以採用了一個JSONArray 對象用來保存多條記錄。在jQuery ajax 中的success 方法中的實現以下：

 if (data != null && data != "") {
                        for (var i = 0; i < data.length; i++) {
                            id = data[i].clientId;
                            $("#clientIdSelect").append("<option value='" + id
                                    + "'>" + id + "</option>");
                        }
                    }

　　我這裏的操做是根據查詢的結果的記錄數來添加一個下拉列表的選項。