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自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
Sep 16 Javascript
HTML,CSS,JavaScript速查表推荐
Dec 02 Javascript
原生js实现日期联动
Jan 12 Javascript
JavaScript中继承用法实例分析
May 16 Javascript
详解Backbone.js框架中的模型Model与其集合collection
May 05 Javascript
Bootstrap布局方式详解
May 27 Javascript
Vue.Js中的$watch()方法总结
Mar 23 Javascript
详解Vue-cli 创建的项目如何跨域请求
May 18 Javascript
详解VUE2.X过滤器的使用方法
Jan 11 Javascript
浅析Vue中拆分视图层代码的5点建议
Aug 15 Javascript
JavaScript中的LHS和RHS分析详情
Apr 06 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
如何使用Gitblog和Markdown建自己的博客
2015/07/31 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
JQuery 常用操作代码
2010/03/14 Javascript
JavaScript 小型打飞机游戏实现原理说明
2010/10/28 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
noty ? jQuery通知插件全面解析
2016/05/18 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
微信小程序开发入门基础教程
2017/04/19 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
ES6 class的应用实例分析
2019/06/27 Javascript
js实现漂亮的星空背景
2019/11/01 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
如何在Python中编写并发程序
2016/02/27 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
python检测服务器端口代码实例
2019/08/31 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
python实现飞机大战游戏(pygame版)
2020/10/26 Python
Python 图片处理库exifread详解
2021/02/25 Python
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
英国森林假期:Forest Holidays
2021/01/01 全球购物
Java中实现多态的机制是什么?
2014/12/07 面试题
nohup的用法
2014/08/10 面试题
党支部创先争优承诺书
2014/08/30 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL
基于Python实现nc批量转tif格式
2022/08/14 Python