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库(迷你版)--自建js库总结
Nov 21 Javascript
javascript生成随机大小写字母的方法
Feb 20 Javascript
javascript实现的多个层切换效果通用函数实例
Jul 06 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
Jun 07 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
Jan 17 Javascript
JavaScript队列函数和异步执行详解
Jun 19 Javascript
bootstrap 通过加减按钮实现输入框组功能
Nov 15 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
Nov 30 Javascript
js实现图片上传并预览功能
Aug 06 Javascript
JavaScript实现的九种排序算法
Mar 04 Javascript
关于JS解构的5种有趣用法
Sep 05 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
smarty模板中拼接字符串的方法
2014/02/14 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
2017/05/15 jQuery
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
详解如何实现一个简单的Node.js脚手架
2017/12/04 Javascript
element-ui的回调函数Events的用法详解
2018/10/16 Javascript
浅析微信扫码登录原理(小结)
2018/10/29 Javascript
vue项目中实现的微信分享功能示例
2019/01/21 Javascript
浅谈一种让小程序支持JSX语法的新思路
2019/06/16 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
Python天气预报采集器实现代码(网页爬虫)
2012/10/07 Python
Python数据结构之Array用法实例
2014/10/09 Python
python脚本内运行linux命令的方法
2015/07/02 Python
jupyter安装小结
2016/03/13 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
Python grequests模块使用场景及代码实例
2020/08/10 Python
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
伯克斯奥特莱斯:Burkes Outlet
2019/03/30 全球购物
美国Max仓库:Max Warehouse
2020/05/31 全球购物
财务会计专业推荐信
2013/11/30 职场文书
小学生获奖感言范文
2014/02/02 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python