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 相关文章推荐
原生js实现半透明遮罩层效果具体代码
Jun 06 Javascript
JQuery设置文本框和密码框得到焦点时的样式
Aug 30 Javascript
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
在每个匹配元素的外部插入新元素的方法
Dec 20 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
Oct 28 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
Oct 26 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
vue登录注册及token验证实现代码
Dec 14 Javascript
php中and 和 &amp;&amp;出坑指南
Jul 13 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
Nov 24 Javascript
NestJs使用Mongoose对MongoDB操作的方法
Feb 22 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 Cookie的一个使用注意点
2008/11/08 PHP
淘宝ip地址查询类分享(利用淘宝ip库)
2014/01/07 PHP
ThinkPHP框架任意代码执行漏洞的利用及其修复方法
2014/07/04 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
JavaScript可否多线程? 深入理解JavaScript定时机制
2012/05/23 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
利用Vue.js实现checkbox的全选反选效果
2017/01/18 Javascript
JavaScript获取用户所在城市及地理位置
2018/04/21 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
Python爬取国外天气预报网站的方法
2015/07/10 Python
Django框架中方法的访问和查找
2015/07/15 Python
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
Python 3 判断2个字典相同
2019/08/06 Python
django中瀑布流写法实例代码
2019/10/14 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
python的Jenkins接口调用方式
2020/05/12 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
python 如何停止一个死循环的线程
2020/11/24 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
Kaufmann Mercantile官网:家居装饰、配件、户外及更多
2018/09/28 全球购物
大专毕业生自我评价分享
2013/11/10 职场文书
企业年会主持词
2014/03/27 职场文书
消防安全责任书范本
2014/04/15 职场文书
2015新学期家长寄语
2015/02/26 职场文书
文艺晚会开场白
2015/05/29 职场文书
2016年大学生社会实践心得体会
2015/10/09 职场文书
Redis 哨兵机制及配置实现
2022/03/25 Redis
Python函数对象与闭包函数
2022/04/13 Python
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android