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

　　我这里的操作是根据查询的结果的记录数来添加一个下拉列表的选项。