常規用法

后臺代碼

// 根據檢測室，獲取員工 @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();// select2txt.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 () {}});});} })

總結

以上是生活随笔為你收集整理的Ajax的基本使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。