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 相关文章推荐
导航跟随滚动条置顶移动示例代码
Sep 11 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
JS中字符串trim()使用示例
May 26 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
Sep 06 Javascript
详解JS正则replace的使用方法
Mar 06 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
jQuery表单对象属性过滤选择器实例详解
Sep 13 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 08 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 Javascript
Vue的自定义组件不能使用click方法的解决
Jul 28 Javascript
如何用JavaScipt测网速
May 09 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使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
Thinkphp整合阿里云OSS图片上传实例代码
2019/04/28 PHP
Laravel 框架路由原理与路由访问实例分析
2020/04/14 PHP
初学prototype,发个JS接受URL参数的代码
2006/09/25 Javascript
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
2013/12/23 Javascript
用Jquery实现滚动新闻
2014/02/12 Javascript
javascript原始值和对象引用实例分析
2015/04/25 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
jQuery+Ajax实现限制查询间隔的方法
2016/06/07 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
2018/04/20 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
Python中subprocess模块用法实例详解
2015/05/20 Python
对pandas中apply函数的用法详解
2018/04/10 Python
python中pika模块问题的深入探究
2018/10/13 Python
关于Django ForeignKey 反向查询中filter和_set的效率对比详解
2018/12/15 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
美国主要的特色咖啡和茶公司:Peet’s Coffee
2020/02/14 全球购物
销售心得体会
2014/01/02 职场文书
医药营销个人求职信范文
2014/02/07 职场文书
党日活动总结
2014/05/07 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
学年个人总结范文
2015/03/05 职场文书
预备党员半年考察意见
2015/06/01 职场文书
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫