需求描述:前台通过onclick触发ajax,到后台返回一个list(json格式的),把list插入到html的table中。

思路简介: ̄□ ̄|| 刚开始的时候,是没有思路的,就卡在了,怎么把 ajax 的回调函数的数据返回到页面上,(⇀‸↼‶) ,后来去度娘了一下,发现都是对table拼字符串   ( ‵o′),贴代码

代码

后台代码:
public Object getDetail(String dName){
List<Dict> list = new ArrayList<>();
try {
Dict dict = dictService.findByDictName(dName);
list = dictService.dectNameDetailList(dict.getDictId());
} catch (Exception e){
e.printStackTrace();
}
return list;
} js代码:
var url = rootPath + '/sys/dict/getDetail';
var s = CommnUtil.ajax(url, { //s相当于 function success(data){} 中的data 也就是后台返回的list,json数据格式
dictName: dictName
}, "json");
if(!!s && s.length > 0){ //成功的回调函数 s相当于 function success(data){} 中的data 也就是后台返回的 list
$('#dictTable tr:gt(0)').remove();//删除之前的数据 dictTable是html中table的id
var item;
$.each(s,function(i,result){
item = "<tr><td>"+result['sortNo']+"</td><td>"+result['dictName']+"</td><td>"+result['dictCode']+"</td></tr>";
$("#dictTableBody").append(item);
});
}else{
$('#dictTable tr:gt(0)').remove();//删除之前的数据
}
$('#res_tree').jstree("deselect_all",true);
$('#responsive_1').modal(); html代码:
<table id="dictTable" class="table table-striped table-bordered table-hover table-checkable order-column">
<thead>
<tr>
<th>排序</th>
<th>选项</th>
<th>值</th>
</tr>
</thead>
<tbody id="dictTableBody">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

效果:

总结:关键点就两个  一个是删除之前的数据  一个是拼接list数据  尤其是前边的删除非常重要,  经验在于积累  哈撒给 ヾ(◍°∇°◍)ノ゙

ajax执行成功后,在success回调函数中把后台返回的list还原到html的table中的更多相关文章

  1. ajax执行成功不进入success方法

    当dataType的值为json时,传入的值和返回的值符合json格式的时候,执行成功才会进入success方法,否则进入error方法.

  2. ajaxSubmit请求返回数据成功,但是不执行success回调函数

    最近项目涉及到附件上传就头痛,一直在用plupload插件在做...ie9偶尔抽风但还是可以的... 然后有个需求,表格每行都有个上传按钮,页面多上传按钮. 一.开始的时候,用plupload做的,多 ...

  3. $.post()返回数据正常,但不执行success回调函数

    今天遇到一特郁闷的问题,如题:$.post()返回数据正常,但不执行success回调函数.说它郁闷是因为没毕业之前就遇到过解决了,却没有记录下来,导致卡了一下午. 像这样,post返回数据正常,但却 ...

  4. jquery ajax 总是还未等到success回调就刷掉了,就进入了onError函数的错误案例分析

    jquery ajax 总是还未等到success回调就刷掉了,就进入了onError函数的错误案例分析: 同样的请求同时请求了2次,然后第二次的请求把第一次的给刷掉了! (比如:<div on ...

  5. ajax请求成功后打开新开窗口(window.open())被拦截的解决方法

    问题:今天在做项目时需要在ajax请求成功后打开一个新的窗口,此时遇到浏览拦截了新窗口的问题,尝试在ajax 回调函数中模拟执行 click 或者 submit 等用户行为(trigger('clic ...

  6. 【笔记】关于jq $.ajax 函数 success回调函数不能赋正确值或返回正确值的问题

    最近在一个项目里面打算实现如下功能: 当我注册账号的时候当输入账号完毕后输入框失焦时执行一个 ajax 请求,验证账号是否被注册,并未这个输入框的 isCorrect属性赋值,如果没有被注册 isCo ...

  7. ajax 执行成功以后返回的数据走的是error方法而不是success方法的问题

    今天在一个功能的时候发现写的ajax的方法执行后台代码成功后返回前台时执行的是error方法而不是success方法,代码如下 jQuery('#form').ajaxSubmit({ type: & ...

  8. ajax请求成功后新开窗口window.open()被拦截解决方法

    ajax 异步请求成功后需要新开窗口打开 url,使用的是 window.open() 方法,但是很可惜被浏览器给拦截了,怎么解决这个问题呢   问题: 前面开发项目时碰到一个问题,ajax 异步请求 ...

  9. ajax请求成功后新窗口window.open()被拦截的解决方法

    ajax 异步请求成功后需要新开窗口打开 url,使用的是 window.open() 方法,但是该操作并不是用户主动触发的,所以它认为这是不安全的就拦截了(不过如果是 _self 的话就不会有这个限 ...

随机推荐

  1. Maven SSH三大框架整合的加载流程

    <Maven精品教程视频\day02视频\03ssh配置文件加载过程.avi;> 此课程中讲 SSH三大框架整合的加载流程,还可以,初步接触的朋友可以听一听. < \day02视频\ ...

  2. mybatis resultType resultMap 区别

    resultType 就是返回的类型 resultMap 返回的是一个结果集,这个结果集一般是用过resultMap节点来配置的,相应的type一般是一个Model. https://blog.csd ...

  3. CXF2.7整合spring发布webservice

    ---------==========--服务端发布webservice-=============-------- 1.需要的jar包: 2.包结构 3.代码 1.实体类 package cn.ql ...

  4. Django之Bootstrap使用

    首先将bootstrap文件粘贴到static文件夹中,引入分为两部分,一是css文件引入,二是js文件引入. 1.css引入: <!DOCTYPE html> <html lang ...

  5. 20165325《Java程序设计》第九周学习总结

    一.教材学习笔记 ch13 1.URL类 URL类是java.net包中的一个重要的类,URL的实例封装着一个统一资源定位符,使用URL创建对象的应用程序称作客户端程序. 一个URL对象通常包含最基本 ...

  6. SpringBoot单元测试示例

    ⒈控制器Action示例 package cn.coreqi.controller; import org.junit.Test; import org.junit.runner.RunWith; i ...

  7. MFC调用libyara遇到的问题

    测试结果 如果调用yara非要变成共享DLL的形式,加那么多的DLL,不如直接调用EXE文件.反而依赖vcruntime运行库的DLL会少很多... 调用libyara 调用libraya和C++调用 ...

  8. mongdb中的_id

    MongoDB中数据的基本单元称为文档(Document).文档是MongoDB的核心概念,多个键极其关联的值有序的放置在一起便是文档. 在一个特定集合内部,需要唯一的标识文档.因此MongoDB中存 ...

  9. 用WMI监控IIS

    参考网站:http://blog.chinaunix.net/uid-7910284-id-5774420.html 参考官方文档:https://docs.microsoft.com/en-us/p ...

  10. Css样式压缩、美化、净化工具 源代码

    主要功能如下: /* 美化:格式化代码,使之容易阅读 */ /* 净化:将代码单行化,并去除注释 */ /* 压缩:将代码最小化,加快加载速度 */ /* 以下是演示代码 */ /*reset beg ...