Ajax的基本使用

常规用法

后台代码

// 根据检测室，获取员工
@RequestMapping(value = "selectPersonInfoByLabId", method = {RequestMethod.GET})
@ResponseBody
public String selectPersonInfoByLabId(@RequestParam String labId, Model model) {
    List<PersonInfoExt> list = this.personInfoWebService.selectByLabId(labId);
    return JSON.toJSONString(list);
}

或者

return JSON.toJSONString(list, SerializerFeature.DisableCircularReferenceDetect, SerializerFeature.WriteDateUseDateFormat);

解析JSON

$('#labId').change(function () {
    $.ajaxData.selectPersonInfoByLabId($('#labId').val(), $('#employeeNo'));
})
$.ajaxData = {
    selectPersonInfoByLabId: function (labId, selector) {
        if (labId && labId != "") {
            $.ajax({
                type: "get",
                url: ctx + "/cnf/employee-biz-capacity/selectPersonInfoByLabId?labId=" + labId,
                data: "",
                dataType: "json",
                async: false,
                success: function (jsonData) {
                    var dataList = jsonData;
                    var itemHtml = "<option></option>";
                    for (var i = 0; i < dataList.length; i++) {
                        var r = dataList[i];
                        itemHtml += '<option value=' + r.code + '>' + r.name + '</option>';
                    }
                    // 先清空在添加
                    selector.html(itemHtml);
                    // 触发默认选中第一个
                    if (dataList.length > 0) {
                        selector.val(null).trigger('change');
                    } else {
                        selector.val(null).trigger('change');
                    }
                },
                error: function () {
                }
            })
        }
    }
}

同理
后台代码

@RequestMapping(
        value = "load", method = {RequestMethod.GET}
)
@ResponseBody
public String load(@RequestParam String testObjectId, @RequestParam String testObjectModelId, Model model) {

    List<AssayBusinessItemVo> assayBusinessItemList = assayBusinessItemWebService.selectAssayBusinessItemById(testObjectId, testObjectModelId);
    List<AssayItem> assayItemList = assayItemWebService.selectAssayItemListById(testObjectId, testObjectModelId);
    List<BusinessTask> businessTaskList = businessTaskWebService.selectBusinessTaskListById(testObjectId, testObjectModelId);
    model.addAttribute("assayBusinessItemList", assayBusinessItemList);
    model.addAttribute("assayItemList", assayItemList);
    model.addAttribute("businessTaskList", businessTaskList);
    return JSON.toJSONString(model);
}

解析JSON

function loadTestObjectModel(id) {
    var url = '${ctx}/dic/test-object-model/load?testObjectId=' + id;
    $.get(url, function (result) {
            $("#testObjectModelIdSelect").select2('val', "")
            var options = [];
            var data = result.page;
            if (data.length > 0) {
                for (var i = 0; i < data.length; i++) {
                    options.push({id: data[i].id, text: data[i].testObjectModelCode})
                }
            }
            $("#testObjectModelIdSelect").select2({
                data: options,
                placeholder: '请选择样规格型号',
                allowClear: true
            })
        },
        "json"
    );
}

同理
后台代码

@RequestMapping(value = {"create"}, method = {RequestMethod.GET})
public String showEditForm(Model model) {
    List<PersonInfoExt> personInfoList = this.personInfoWebService.selectByDeptmentCodes(currentUser != null ? currentUser.getDepartmentCode() : null);
    model.addAttribute("personInfoList", JSON.toJSONString(personInfoList));
}

解析JSON

$("#normal-plan-tbody").on("click", "td", function () {
    var td = $(this);
    var classText = $(this).attr('class');
    if (classText == 'samplingOprator') {
        // 下拉框
        var txt = $("<select name='cell' id='samplingSelect' type='text' class='form-control' style='margin: 0px;" +
            "border-style: none;padding: 0px;height: 100%;width: 100%'></select>");
        var options = '<option ></option>';
        var personInfoList = '${personInfoList}';
        var json = $.parseJSON(personInfoList);
        for (var i = 0; i < json.length; i++) {
            var person = json[i];
            options += '<option value="' + person.code + '">' + person.name + '</option>';
        }
        txt.append(options);
        // 清空原有值
        td.text("");
        // 绑定元素
        td.append(txt);
        // 获取焦点
        txt.focus();
        // select2
        txt.select2({width: 100 + "%", placeholder: "请选择", allowClear: true});
        // 选中
        txt.change(function () {
            var newText = $(this).select2('data').text;
            var newVal = $(this).val();
            var value = td.parent('tr').find('td').eq(1).find('input').attr('value');
            value = value + ',' + newVal;
            $.ajax({
                type: 'POST',
                url: ctx + "/biz/plan/daily-plan/updatePerson",
                data: {value: value},
                dataType: 'JSON',
                success: function (res) {
                    var message = res.message;
                    // 移除文本框,显示新值
                    td.html('');
                    td.text(newText);
                },
                error: function () {
                }
            });
        });
    }
})