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 相关文章推荐
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
Apr 12 Javascript
javascript while语句和do while语句的区别分析
Dec 08 Javascript
基于jQuery的仿flash的广告轮播代码
Nov 04 Javascript
javascript中typeof的使用示例
Dec 19 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
Apr 11 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
Feb 15 Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
Jan 05 Javascript
JS实现访问DOM对象指定节点的方法示例
Apr 04 Javascript
实例讲解vue源码架构
Jan 24 Javascript
Java Varargs 可变参数用法详解
Jan 28 Javascript
ES6 十大特性简介
Dec 09 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读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
PHP学习记录之常用的魔术常量详解
2019/12/12 PHP
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
JavaScript注入漏洞的原理及防范(详解)
2016/12/04 Javascript
JS对象的深度克隆方法示例
2017/03/16 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
JS设计模式之命令模式概念与用法分析
2018/02/06 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
[01:09]模型精美,特效酷炫!TI9不朽宝藏Ⅰ鉴赏
2019/05/10 DOTA
python函数缺省值与引用学习笔记分享
2013/02/10 Python
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
OpenCV-Python实现轮廓检测实例分析
2018/01/05 Python
Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例
2019/01/23 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
python 五子棋如何获得鼠标点击坐标
2019/11/04 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
你应该知道的Python3.6、3.7、3.8新特性小结
2020/05/12 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
python调用私有属性的方法总结
2020/07/24 Python
CSS3实现渐变背景兼容问题
2020/05/06 HTML / CSS
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
Hunkemöller西班牙:欧洲最大的内衣连锁店
2018/08/15 全球购物
怎样填写就业意向
2014/04/02 职场文书
python tkinter实现定时关机
2021/04/21 Python
MYSQL如何查看进程和kill进程
2022/03/13 MySQL
我家女友可不止可爱呢 公开OP主题曲无字幕动画MV
2022/04/11 日漫