在js中获取后台封装的json数据 文章分类:Web前端 关键字: jquery 在项目中想添加一个select 它的值是从数据库中动态获取的,之前一直是把数据放到session中,可运行的结果总是不理想,因为我的页面是静态的,只有我每次重新打开一个浏览器后它才会为session重新赋值。 在同事的帮助下,动态的为select赋值,即在每次弹出dialog时动态为select赋值,其中的值是后台从数据库中取出封装为json数据传输过来的。 后台封装Json格式的数据函数: Java代码 @RequestMapping public void getProjectsByUser(HttpServletRequest request, HttpServletResponse response) { User user = (User)SecurityContextHolder.getContext().getAuthentication().getPrincipal(); Set<Project> finalCanAddProjects = userService.getCanRegProjects(user); StringBuilder jsonBuilder = new StringBuilder("{list:["); int i = 0; for (Project project : finalCanAddProjects) { i++; jsonBuilder.append("{"); jsonBuilder.append("id:'"); jsonBuilder.append(project.getId()); jsonBuilder.append("', "); jsonBuilder.append("name:'"); jsonBuilder.append(project.getName()); jsonBuilder.append("'"); jsonBuilder.append("}"); jsonBuilder.append(i == finalCanAddProjects.size() ? "" : ","); } jsonBuilder.append("]}"); MessageUtils.outputJSONResult(jsonBuilder.toString(), response); } @RequestMapping public void getProjectsByUser(HttpServletRequest request, HttpServletResponse response) { User user = (User)SecurityContextHolder.getContext().getAuthentication().getPrincipal(); Set<Project> finalCanAddProjects = userService.getCanRegProjects(user); StringBuilder jsonBuilder = new StringBuilder("{list:["); int i = 0; for (Project project : finalCanAddProjects) { i++; jsonBuilder.append("{"); jsonBuilder.append("id:'"); jsonBuilder.append(project.getId()); jsonBuilder.append("', "); jsonBuilder.append("name:'"); jsonBuilder.append(project.getName()); jsonBuilder.append("'"); jsonBuilder.append("}"); jsonBuilder.append(i == finalCanAddProjects.size() ? "" : ","); } jsonBuilder.append("]}"); MessageUtils.outputJSONResult(jsonBuilder.toString(), response); } 在js中接受此数据: Java代码 function getProjectsByUser() { $.getJSON(path+"/bio/studymanager/getProjectsByUser.do?dateTime=" + (new Date()).getTime(), function(json) { var options = ""; $.each(json.list, function(i, n) { options += "<option value='"+n.id+"'>"+n.name+"</option>"; }); $('#projectIdSelect').html(options); } ); } function getProjectsByUser() { $.getJSON(path+"/bio/studymanager/getProjectsByUser.do?dateTime=" + (new Date()).getTime(), function(json) { var options = ""; $.each(json.list, function(i, n) { options += "<option value='"+n.id+"'>"+n.name+"</option>"; }); $('#projectIdSelect').html(options); } ); } $.getJSON的api:http://www.iebe.cn/temp/jQuery_API/source/ $.getJSON.html 在$.getJSON(path+"/bio/studymanager/getProjectsByUser.do?dateTime=" + (new Date()).getTime(),之所以加时间参数,是为了防止浏览器缓存,如果不加此时间参数,当你第二次请求时浏览器就默认为数据没什么改变,而不进行请求。 Java代码 function getStudyById(id, name, projectId, status, description) { $('#studyId').val(id); $('#studyName').val(name); $('#studyStatus').val(status); $('#studyDescription').val(description); getProjectsByUser(); $('#projectIdSelect option').each(function(){ if ($(this).val()== projectId) { $(this).attr('selected', 'selected'); } }); $('#manageStudyDialog').dialog(manageStudyDialog); $('#manageStudyDialog').dialog('open'); }