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 typeof 用法
Dec 28 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
Jun 14 Javascript
jquery 跨域访问问题解决方法(笔记)
Jun 08 Javascript
Ext JS添加子组件的误区探讨
Jun 28 Javascript
轻松实现jquery选项卡切换效果
Oct 10 Javascript
javascript入门之string对象【新手必看】
Nov 22 Javascript
select下拉框插件jquery.editable-select详解
Jan 22 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
使用 Node.js 对文本内容分词和关键词抽取
May 27 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
浅谈JS对象添加getter与setter的5种方法
Jun 09 Javascript
Vue微信公众号网页分享的示例代码
May 28 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 ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
PHP利用MySQL保存session的实现思路及示例代码
2014/09/09 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
一些mootools的学习资源
2010/02/07 Javascript
js自动下载文件到本地的实现代码
2013/04/28 Javascript
JavaScript中最简洁的编码html字符串的方法
2014/10/11 Javascript
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
详解Bootstrap glyphicons字体图标
2016/01/04 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
2018/03/02 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
2018/11/02 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
vue组件入门知识全梳理
2020/09/21 Javascript
实现vuex原理的示例
2020/10/21 Javascript
python里对list中的整数求平均并排序
2014/09/12 Python
在Python中使用HTMLParser解析HTML的教程
2015/04/29 Python
Python中django学习心得
2017/12/06 Python
Python实现pdf文档转txt的方法示例
2018/01/19 Python
Python使用pickle模块储存对象操作示例
2018/08/15 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
Python动态强类型解释型语言原理解析
2020/03/25 Python
Django更新models数据库结构步骤
2020/04/01 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
感恩母亲节演讲稿
2014/05/07 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS