经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
js获取列表多条数据(接口)
来源:cnblogs  作者:蜡笔Sicily  时间:2019/11/12 11:16:13  对本文有异议
  1. 读取数据:
    //ajax去服务器端校验

    $.ajax({
  1. 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>"
    );
    }
    );
    }
    }
    });

  1. 保存数据:
    $("#btnSubmit").on('click',(function () {

    var ab = new Array();
    var ch_no = $('.ch_no');
    var aDiv=document.getElementsByClassName("ch_no");//获取文档中class为"ch_no"的所有元素
  1. for (var i = 0;i<aDiv.length;i++) {//遍历 aDiv的中所有元素并且将所有class为"ch_no"的元素保存到数组aerial
  1. 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('保存失败,请重试! ');
    }
    })
    })

原文链接:http://www.cnblogs.com/sicilyxx/p/11840505.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号