js获取列表多条数据(接口)
读取数据:
//ajax去服务器端校验 $.ajax({
type:"post",
url:"http://",
data:{deviceid:1},
dataType:'json',
success : function(data) {
var jsonText = data;
var ab= eval("("+jsonText+")");//json格式转换
for(j=0;j<ab.length;j++){
$(ab[j]).each(
function (i, values) {
$("#list").append(
"<tr class='ch_no'><td>" + i+1 + "</td>" +
"<td style=\"padding-left: 5%;\">" + values.isReign + "</td>" +
"<td style=\"padding-left: 5%;\">"+ values.gain + "</td>" +
"<td style=\"padding-left: 5%;\">" +
"<select id=\"outputPower\">\n" +
" <option selected=\"selected\">"+values.outputPower+"</option>\n" +
"</select>" +
"</td>" +
"<td style=\"padding-left: 5%;\">" +
"<select id=\"forwardLinkRate\">\n" +
" <option selected=\"selected\">"+values.forwardLinkRate+"</option>\n" +
"</select>"+
"<td style=\"padding-left: 5%;\">" +
"<select id=\"reverseLinkRate\">\n" +
" <option selected=\"selected\">"+values.reverseLinkRate+"</option>\n" +
"</select>" +
"</td>" +
"<td style=\"padding-left: 5%;\">" +
"<select id=\"forwardModType\">\n" +
" <option selected=\"selected\">"+values.forwardModType+"</option>\n" +
"</select>" +
"</td>" +
"<td style=\"padding-left: 5%;\">" +
"<select id=\"reverseModType\">\n" +
" <option selected=\"selected\">"+values.reverseModType+"</option>\n" +
"</select>" +
"</td>" +
"<td style=\"padding-left: 5%;\">" +
"<select id=\"outputRate\">\n" +
" <option selected=\"selected\">"+values.outputRate+"</option>\n" +
" <option>不限</option>" +
"</select>" +
"</td></tr>"
);
}
);
}
}
});
保存数据:
$("#btnSubmit").on('click',(function () {
var ab = new Array();
var ch_no = $('.ch_no');
var aDiv=document.getElementsByClassName("ch_no");//获取文档中class为"ch_no"的所有元素
for (var i = 0;i<aDiv.length;i++) {//遍历 aDiv的中所有元素并且将所有class为"ch_no"的元素保存到数组aerial
var outputPower_con = $(ch_no[i]).find("#outputPower").find("option:selected").val();
var forwardLinkRate_con = $(ch_no[i]).find("#forwardLinkRate").find("option:selected").val();
var reverseLinkRate_con = $(ch_no[i]).find("#reverseLinkRate").find("option:selected").val();
var forwardModType_con = $(ch_no[i]).find("#forwardModType").find("option:selected").val();
var reverseModType_con = $(ch_no[i]).find("#reverseModType").find("option:selected").val();
var outputRate_con = $(ch_no[i]).find("#outputRate").find("option:selected").val();
aerial.push({
outputPower: outputPower_con,
forwardLinkRate: forwardLinkRate_con,
reverseLinkRate: reverseLinkRate_con,
forwardModType: forwardModType_con,
reverseModType: reverseModType_con,
outputRate: outputRate_con
})
}
console.log(ab);
$.ajax({
url: "http://",//接口地址
type:'post',
data: ab,
datatype: 'json',
success : function(data) {
console.log(data)
},
error : function() {
alert('保存失败,请重试! ');
}
})
})
js获取列表多条数据(接口)的更多相关文章
- 腾讯面试题,js处理1千万条数据排序并且页面不卡顿
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 面试题:js如何渲染十万条数据并不卡住界面
这道题考察了如何在不卡住页面的情况下渲染数据,也就是说不能一次性将几万条都渲染出来,而应该一次渲染部分 DOM,那么就可以通过 requestAnimationFrame 来每 16 ms 刷新一次. ...
- python插入记录后获取最后一条数据的id
python插入记录后取得主键id的方法(cursor.lastrowid和conn.insert_id()) 参考:https://blog.csdn.net/qq_37788558/article ...
- Oracle数据库实现获取前几条数据的方法
如何在Oracle数据库中实现获取前几条数据的方法呢?就是类似SQL语句中的SELECT TOP N的方法.本文将告诉您答案,举例说明了哟! 1.在Oracle中实现SELECT TOP N : ...
- SharePoint 2010 获取列表中所有数据(包括文件夹内)的方法
转: http://blog.csdn.net/wangwenism/article/details/8751411 SharePoint的列表能存储文件以及文件夹,用户使用的时候,经常会建几个分类文 ...
- js获取异步方法里面的数据
这里介绍 五种方法(说白了本质 就三种) 1.callback回调函数 function getData(callback){ setTimeout(()=>{ let name = '哈哈 ...
- JS获取form表单数据
以下代码可放在一个js文件中,以便通用: //获取指定表单中指定标签对象 function getElements(formId, label) { var form = document.getEl ...
- 【笔记】jquery js获取浏览器滑动条距离顶部距离的写法
jq写法 $(window).scroll(function(){ var $top = $(document).scrollTop(); }); /*注:$(window).scroll(funct ...
- js获取地址栏中的数据
window.location.href:设置或获取整个 URL 为字符串window.location.pathname:设置或获取对象指定的文件名或路径window.location.search ...
随机推荐
- Spring Boot-Error:(3, 32) java: 程序包org.springframework.boot不存在
问题分析 -由于加载的项目没有加载相应的依赖的包文件导致 解决方案 setting 选中图中的设置,点击apply,IDE就会自动下载所需要的包文件
- NIO通信中connect()方法和finishConnect()方法的区别
1.对于阻塞模式下,调用connect()进行连接操作时,会一直阻塞到连接建立完成(无连接异常的情况下).所以可以不用finishConnect来确认. 2.但在非阻塞模式下,connect()操作是 ...
- php-7.3.4 configure: error: Please reinstall the libzip distribution
php-7.3.4 configure: error: Please reinstall the libzip distribution # wget https://libzip.org/downl ...
- PHPUnit 单元测试教程
一.官网下载对应 PHP 版本的代码库 https://phpunit.de/getting-started-with-phpunit.html 二.安装 PHPUnit 官网提供了两种方法安装 1. ...
- roboware 常见操作和问题
博客参考:https://blog.csdn.net/u013528298/article/details/88052470 1. build中错误位置定位方式 按住“CTRL”键并点击错误提示的链接 ...
- elasticsearch中mapping的_source和store的笔记(转)
原文地址: https://www.cnblogs.com/zklidd/p/6149120.html 0.故事引入 无意中看到了ES的mapping中有store字段,作为一个ES菜鸡,有必要对这个 ...
- PMP 1~3章错题总结
工作到了一定的年限,都或多或少想了解管理的知识,PMP是国际认证的一项考试,招聘要求上也有提及. 不需要报名培训班,万能的某宝即可解决报名.PDU.学习资料的问题,但3900的考试费还是免不了的,为了 ...
- java Random 抢红包算法
红包有一个总金额和总数量,领的时候随机分配金额. 维护一个剩余总金额和总数量,分配时,如果数量等于1,直接返回总金额,如果大于1,则计算平均值,并设定随机最大值为平均值的两倍,然后取一个随机值,如果随 ...
- Python的网页解析库-PyQuery
PyQuery库也是一个非常强大又灵活的网页解析库,如果你有前端开发经验的,都应该接触过jQuery,那么PyQuery就是你非常绝佳的选择,PyQuery 是 Python 仿照 jQuery 的严 ...
- 【Spring Boot学习之六】Spring Boot整合定时任务&异步调用
环境 eclipse 4.7 jdk 1.8 Spring Boot 1.5.2一.定时任务1.启动类添加注解@EnableScheduling 用于开启定时任务 package com.wjy; i ...