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 类与静态类的实现
Apr 01 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
Jan 24 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
Jan 09 Javascript
jQuery继承extend用法详解
Oct 10 Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 Javascript
深入理解javascript的getTime()方法
Feb 16 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
Feb 24 Javascript
vue.js中$set与数组更新方法
Mar 08 Javascript
node打造微信个人号机器人的方法示例
Apr 26 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 Javascript
layui使用templet格式化表格数据的方法
Sep 16 Javascript
Vue+Element实现网页版个人简历系统(推荐)
Dec 31 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的无限分类实现想法~
2007/01/02 PHP
如何用PHP实现插入排序?
2013/04/10 PHP
php如何控制用户对图片的访问 PHP禁止图片盗链
2016/03/25 PHP
php基于websocket搭建简易聊天室实践
2016/10/24 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
js window.onload 加载多个函数的方法
2009/11/02 Javascript
JQuery中html()方法使用不当带来的陷阱
2011/04/07 Javascript
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
Javascript基础知识(一)核心基础语法与事件模型
2014/09/29 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
2014/11/23 Javascript
AngularJS的一些基本样式初窥
2015/07/27 Javascript
Javascript实现的Map集合工具类完整实例
2015/07/31 Javascript
JS去除重复并统计数量的实现方法
2016/12/15 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
2017/01/03 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
Python库urllib与urllib2主要区别分析
2014/07/13 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
wxPython实现窗口用图片做背景
2018/04/25 Python
详解Django中间件的5种自定义方法
2018/07/26 Python
python爬虫之线程池和进程池功能与用法详解
2018/08/02 Python
python三大神器之fabric使用教程
2019/06/10 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
浅析Python 条件控制语句
2020/07/15 Python
斯凯奇澳大利亚官网:SKECHERS澳大利亚
2018/03/31 全球购物
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
如何写一个自定义标签
2012/12/28 面试题
化学专业毕业生自荐信
2013/11/15 职场文书
关爱残疾人标语
2014/06/25 职场文书
教师群众路线心得体会
2014/11/04 职场文书
党员个人自我评价
2015/03/03 职场文书
2015年推普周活动总结
2015/03/27 职场文书