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 位置插件
Dec 25 Javascript
jQuery获取地址栏参数插件(模仿C#)
Oct 26 Javascript
Javascript 浮点运算精度问题分析与解决
Mar 26 Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 Javascript
javascript禁止超链接跳转的方法
Feb 02 Javascript
Vue keep-alive实践总结(推荐)
Aug 31 Javascript
clipboard.js在移动端复制失败的解决方法
Jun 13 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
Jul 13 Javascript
JS选取DOM元素常见操作方法实例分析
Dec 10 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
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 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
深入PHP异步执行的详解
2013/06/03 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
php判断文件上传图片格式的实例详解
2017/09/30 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
Javascript 事件流和事件绑定
2009/07/16 Javascript
JavaScript中Math对象方法使用概述
2014/01/02 Javascript
jQuery中:disabled选择器用法实例
2015/01/04 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
JavaScript实现的简单烟花特效代码
2015/10/20 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
javaScript中的空值和假值
2017/12/18 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
在Vue中实现随hash改变响应菜单高亮
2020/03/09 Javascript
Python使用urllib2获取网络资源实例讲解
2013/12/02 Python
简单了解python PEP的一些知识
2019/07/13 Python
python实现图片插入文字
2019/11/26 Python
pygame实现飞机大战
2020/03/11 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
基于SQLAlchemy实现操作MySQL并执行原生sql语句
2020/06/10 Python
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
海蓝之谜英国官网:La Mer英国
2020/01/15 全球购物
C/C++程序员常见面试题一
2012/12/08 面试题
会计自我鉴定范文
2013/10/06 职场文书
聚美优品广告词改编
2014/03/14 职场文书
承诺书模板
2014/08/30 职场文书
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
毕业生班级鉴定评语
2015/01/04 职场文书
幼儿教师师德师风自我评价
2015/03/05 职场文书
结婚司仪主持词
2015/06/29 职场文书