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

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