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继承 笔记
Jul 13 Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
jQuery功能函数详解
Feb 01 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
Jun 14 Javascript
EsLint入门学习教程
Feb 17 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
React Native中NavigatorIOS组件的简单使用详解
Jan 27 Javascript
jQuery pagination分页示例详解
Oct 23 jQuery
简单的React SSR服务器渲染实现
Dec 11 Javascript
javascript异步编程的六种方式总结
May 17 Javascript
基于vue实现图片验证码倒计时60s功能
Dec 10 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利用COM对象访问SQLServer、Access
2006/10/09 PHP
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
Javascript 对象的解释
2008/11/24 Javascript
使用JQUERY Tabs插件宿主IFRAMES
2010/01/01 Javascript
javascript 静态对象和构造函数的使用和公私问题
2010/03/02 Javascript
关于JavaScript中var声明变量作用域的推断
2010/12/16 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
详解vue-router和vue-cli以及组件之间的传值
2017/07/04 Javascript
JavaScript实现换肤功能
2017/09/15 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
使用vue2.0创建的项目的步骤方法
2018/09/25 Javascript
vscode下的vue文件格式化问题
2018/11/28 Javascript
python中字符串比较使用is、==和cmp()总结
2018/03/18 Python
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
Python 字符串转换为整形和浮点类型的方法
2018/07/17 Python
如何用python写一个简单的词法分析器
2018/12/18 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
异步传递消息系统的作用
2016/05/01 面试题
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
早餐连锁店计划书
2014/01/08 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
2014年度考核工作总结
2014/12/24 职场文书
自我推荐信格式模板
2015/03/24 职场文书
学习焦裕禄观后感
2015/06/09 职场文书
军训决心书范文
2015/09/22 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
2022/06/01 Java/Android
Android中View.post和Handler.post的关系
2022/06/05 Java/Android
Apache SkyWalking 监控 MySQL Server 实战解析
2022/09/23 Servers