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 相关文章推荐
jQuery :first选择器使用介绍
Aug 09 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
Sep 29 Javascript
javascript事件模型实例分析
Jan 30 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
Apr 10 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
Dec 03 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
Mar 08 Javascript
Bootstrap警告(Alerts)的实现方法
Mar 22 Javascript
React Native之TextInput组件解析示例
Aug 22 Javascript
vue 指定组件缓存实例详解
Apr 01 Javascript
JS如何获取地址栏的参数实例讲解
Oct 06 Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
《PHP编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
PHP邮件发送类PHPMailer用法实例详解
2014/09/22 PHP
PHP实现递归无限级分类
2015/10/22 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
JS与C#编码解码
2013/12/03 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
JavaScript各类型的关系图解
2015/10/16 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
js继承实现方法详解
2016/12/16 Javascript
JS实现双击内容变为可编辑状态
2017/03/03 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
详解AngularJS 路由 resolve用法
2017/04/24 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
2017/07/20 jQuery
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
js实现无缝滚动双图切换效果
2019/07/09 Javascript
vue 解决异步数据更新问题
2019/10/29 Javascript
如何使用python把ppt转换成pdf
2019/06/29 Python
python使用scapy模块实现ping扫描的过程详解
2021/01/21 Python
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
幼儿园教师个人反思
2014/01/30 职场文书
将相和教学反思
2014/02/04 职场文书
党章培训心得体会
2014/09/04 职场文书
学校少先队工作总结
2015/08/12 职场文书
幼师自荐信范文(2016推荐篇)
2016/01/28 职场文书
vue elementUI表格控制对应列
2022/04/13 Vue.js