需求描述:前台通过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. Invalid bound statement (not found) 找不到mapper 映射文件异常

    访问页面报如下错(注意第一行后面的 invalid bound statement (not found)) 这时候再mapper的pom.xml文件要加如下. 否则该节点mybatis的mapper ...

  2. mysql连接报java.math.BigInteger cannot be cast to java.lang.Long异常

    使用hibernate出现以下错误 java.sql.SQLException: java.lang.ClassCastException: java.math.BigInteger cannot b ...

  3. Django学习手册 - 前端input数据获取

    view获取数据方法归纳: #请求meta数据 request.mata(...) request.method(POST,GET,PUT) #从meta里面获取数据 request.path_inf ...

  4. java--GC Root有哪些

    GC管理的主要区域是Java堆,一般情况下只针对堆进行垃圾回收.方法区.JVM栈和Native栈不被GC所管理,因而选择这些非堆区的对象作为GC roots,被GC roots引用的对象不被GC回收. ...

  5. 机器学习超参数优化算法-Hyperband

    参考文献:Hyperband: Bandit-Based Configuration Evaluation for Hyperparameter Optimization I. 传统优化算法 机器学习 ...

  6. 【python网络爬虫】之requests相关模块

    python网络爬虫的学习第一步 [python网络爬虫]之0 爬虫与反扒 [python网络爬虫]之一 简单介绍 [python网络爬虫]之二 python uillib库 [python网络爬虫] ...

  7. Pytorch Visdom

    fb官方的一些demo 一.  show something 1.  vis.image:显示一张图片 viz.image( np.random.rand(3, 512, 256), opts=dic ...

  8. X86架构

    在接触BIOS的时候,都需要对PC架构有一定的认知.目前的PC架构绝大多数都是Intel的X86架构,貌似也是因为INTEL的这个X86架构早就了目前INTEL如日中天的地位. 废话不多说,X86架构 ...

  9. Linux虚拟机安装及环境搭建

    1.下载centos,地址:https://www.centos.org/download/ 下载时选择DVD ISO 2.使用VMware Workstation进行安装. 3.虚拟机网络配置    ...

  10. linux shell 进阶篇、shell脚本编程-创建函数

    使用函数 #!/bin/bash # testing the script function myfun { echo "This is an example of a function&q ...