jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签


Posted in Javascript onMarch 29, 2016

废话不多说了,直接给大家贴代码了,具体内容如下所示:

// js

<script type="text/javascript">
function myBtn_f() {
var cnt = $('#myCnt').val();
syncAjax('myAjax.html', {
'cnt' : cnt
}, function(result) {
if (100 == result.statusCode) {
var data = result.lst;
var $d = $('#myDiv');
alert("[" + data + "]");
for ( var i = 0; i < data.length; i++) {
var input1 = $("<input type='text' name='input1' />");
input1.attr('value', data[i]);
$d.append(input1);
}
} else {
alert("error");
}
});
}
function syncAjax(myUrl, myData, sufn) {
$.ajax({
url : myUrl,
data : myData,
type : 'post',
dataType : 'json',
cache : false,
async : false,
success : function(result) {
if (result.statusCode == 200) {
alert("会话超时,请重新登录!");
window.location.href = "index.jsp";
} else {
if (sufn)
sufn(result);
}
},
error : function(msg) {
alert("error:" + msg);
}
});
};
</script>

//html

<tr>
<td><input type="text" id="myCnt" /></td>
<td><div id="myDiv"></div></td>
</tr>
<input id="myBtn" type="button" value="create" onclick="myBtn_f()" />

// 后台

@RequestMapping("myAjax")
@ResponseBody
public String myAjax(
@RequestParam(defaultValue = "0", required = false) int cnt) {
List<String> lst = new ArrayList<String>();
for (int i = 0; i < cnt; i++) {
lst.add("no:" + i);
}
JSONObject result = new JSONObject();
result.put("statusCode", 100);
result.put("lst", lst);
return result.toString();
}

关于jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签的全部介绍到此结束,希望对大家有所帮助!

Javascript 相关文章推荐
javascript div 遮罩层封锁整个页面
Jul 10 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
jQuery插件uploadify实现ajax效果的图片上传
Jun 18 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
Feb 28 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
Sep 20 Javascript
详解如何使用webpack打包JS
Jun 21 Javascript
老生常谈JS中的继承及实现代码
Jul 06 Javascript
layDate日期控件使用方法详解
Nov 15 Javascript
js+html5 canvas实现ps钢笔抠图
Apr 28 Javascript
React传值 组件传值 之间的关系详解
Aug 26 Javascript
Layui数据表格之单元格编辑方式
Oct 26 Javascript
JavaScript面向对象程序设计教程
Mar 29 #Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 #Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 #Javascript
Jquery操作cookie记住用户名
Mar 29 #Javascript
jQuery简单实现提交数据出现loading进度条的方法
Mar 29 #Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 #Javascript
AngularJS directive返回对象属性详解
Mar 28 #Javascript
You might like
php批量添加数据与批量更新数据的实现方法
2014/12/16 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
thinkPHP5.1框架使用SemanticUI实现分页功能示例
2019/08/03 PHP
代码生成器 document.write()
2007/04/15 Javascript
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
2008/09/25 Javascript
JavaScript函数、方法、对象代码
2008/10/29 Javascript
firefox事件处理之自动查找event的函数(用于onclick=foo())
2010/08/05 Javascript
javascript重写alert方法的实例代码
2013/03/29 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
jQuery使用元素属性attr赋值详解
2015/02/27 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
JS判断是否手机或pad访问实现方法
2016/12/09 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
bootstrap table实现单击单元格可编辑功能
2017/03/28 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
在小程序中使用Echart图表的示例代码
2018/08/02 Javascript
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
JS实现图片切换效果
2018/11/17 Javascript
详解使用WebPack搭建React开发环境
2019/08/06 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
Javascript节流函数throttle和防抖函数debounce
2020/12/03 Javascript
[54:05]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第一场 1月9日
2021/03/11 DOTA
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
Python3遍历目录树实现方法
2015/05/22 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
什么时候需要进行强制类型转换
2016/09/03 面试题
大门门卫岗位职责
2013/11/30 职场文书
市场营销调查计划书
2014/05/02 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
闪闪红星观后感
2015/06/08 职场文书
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers