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写的一个自定义弹出式对话框代码
Jan 17 Javascript
js 控制图片大小核心讲解
Oct 09 Javascript
基于jquery实现的文字淡入淡出效果
Nov 14 Javascript
jQuery实现倒计时按钮功能代码分享
Sep 03 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
详解AngularJS中的filter过滤器用法
Jan 04 Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 Javascript
JS实现的仿QQ空间图片弹出效果代码
Feb 23 Javascript
EasyUI 结合JS导出Excel文件的实现方法
Nov 10 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
Jan 21 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
May 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
javascript,php获取函数参数对象的代码
2011/02/03 PHP
MySql数据库查询结果用表格输出PHP代码示例
2015/03/20 PHP
PHP发送AT指令实例代码
2016/05/26 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
thinkPHP内置字符串截取函数用法详解
2016/11/15 PHP
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
JQuery判断子iframe何时加载完成解决方案
2013/08/20 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
jQuery过滤特殊字符及JS字符串转为数字
2016/05/26 Javascript
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
vue实现点击出现操作弹出框的示例
2020/11/05 Javascript
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
简单上手Python中装饰器的使用
2015/07/12 Python
python用装饰器自动注册Tornado路由详解
2017/02/14 Python
python用户管理系统的实例讲解
2017/12/23 Python
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
生产管理的三大手法
2013/11/11 职场文书
出纳员的岗位职责
2014/02/22 职场文书
党建工作经验交流材料
2014/05/25 职场文书
民事和解协议书格式
2014/11/29 职场文书
2015年导购员工作总结
2015/04/25 职场文书
戒赌保证书
2015/05/11 职场文书
三严三实·严以律己心得体会
2016/01/13 职场文书
学校教代会开幕词
2016/03/04 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书
python实现Thrift服务端的方法
2021/04/20 Python