js数组，对象和json格式的处理-js取表格数据，json格式异步请求

推荐一个网站，建议大家去看看怎样快速而优雅地遍历 JavaScript 数组

第一段

场景：php将数据取出便利到模版后，自己用js取出模版的数据，组装成json格式提交到一个控制器。比如代码如下：

     
        15
        1
        1
        15
     
     
        16
        1
        1
        16
     
     
        17
        1
        1
        17
     
     

• 取出数据的代码

// 取出标题部分
var thead = new Object();
      $("thead tr th").each(function(i){
         thead[i] = $(this).text();
     });
 console.log(thead);
// tbody
var datas = new Object();
$("tbody tr").each(function(i){
    datas[i] = new Object();
    datas[i]['id'] = $(this).children("td").eq(0).text();
    datas[i]['web_id'] = $(this).children("td").eq(1).text();
    datas[i]['game_id'] = $(this).children("td").eq(2).text();
    datas[i]['username'] = $(this).children("td").eq(3).text();
});
//                console.log(datas);
//                datas = JSON.stringify(datas);
//                console.log(datas);
//// 组装标题和内容
var data = new Object();
        data['thead'] = thead;
        data['datas'] = datas;
// ajax处理
$.ajax({
        type: "GET",
        url: "{{ url('excel') }}",
        data: data,
        dataType:'json',
        success: function (data) {
            alert(data.msg);
        }

    })

注意事项：
1。数组和对象使用介绍：数组和对象要预定义。而且一次预定义只能定义一维数组。
所以我们如果需要使用二维数组，就可以在内部再定义一个数组，然后赋值给外层数组。
2.数组或对象的使用选择：JSON.stringify(datas);是将对象转换成json格式。此处其实使用new Array;也可以取出数据。但是我们还是用对象比较符合需求
3.打印：数组活着对象的时候，我们打印可以使用console.log(datas),但是使用documen.write(datas)是不能打印数组对象的。我们如果打印具体某个值，使用这两种方式都可以

---

ajax请求处理

• 在控制器里面打印ajax提交的数据

$request = $request->all();
 dd($request);

直接传递datas，控制器的到的数据

传递`JSON.stringify(datas)`的到的结果

把表单头部尾部都组装请求打印后结果

我有点困惑，为什么我传对象过去，的到的却是数组呢？还有，其实用不用dataType:'json',的到的结果都是一样的。但是此处使用了它，为什么传递的时候却是传递JSON.stringify(datas)的到的结果图的结果呢

---

• 如果我们想获取tr或者td的条数，可以这样

var num = $("#example1 tbody tr").toArray();  //获取总记录条数
//    alert(num.length);

第二段

我发现我不能使用ajax请求去打印数据，因为控制器里面的excel是直接导出的一个结果，就相当于是返回给我我们数据。而ajax又不能接受处理文件这个数据。所以我此处用了post提交的方式

• 先来看一个一维的数组提交

var jsPost = function(action, values) {
  var id = Math.random();
  document.write('
');
  for (var key in values) {
    document.write('');
  }
  document.write('
');  
  document.getElementById('post' + id).submit();
}
jsPost('b.html', {
  'username': 'zhangsan',
  'password': '123'
});

我又将第一次的代码做了修改
1.二维对象取值的时候，$(this).children("td").eq(1).text();这种方法不灵活，因为它是写死的。应该再用each遍历一次取值
2.对象遍历使用for(var key in value),
3.post传递的时候，要把行的个数传递过去，因为我们数组的形式传递的是一维数组，传递后还要拆分成二维数组打印

• 控制器代码

$num = $request->input('num');   //接收的是一维数组，需要拆分
        $request = $request->except(['_token','num']);
        //把一维数组拆分成二维
        $datas = array_chunk($request,$num);
          \Excel::create('Filename', function($excel)use($datas) {

            $excel->sheet('Sheetname', function($sheet)  use($datas) {

                $sheet->fromArray($datas);

            });

        })->export('xls');

• 代码

function excel(){
    var datas = new Object();
    $("#example1 tbody tr").each(function(i){
        datas[i+1] = new Object();
        $(this).children("td").each(function(j){
            datas[i+1][j] = $(this).text();
        });
    });
    datas[0] = new Object();
    $("#example1 thead tr th").each(function(i){
        datas[0][i] = $(this).text();
    });

//                取出每一行的条数
    var num = $("#example1 thead tr th").toArray().length;
    // var token = $("input[name='_token']").val();
    // console.log(token);
    //取出打印头
    var head = $(".content-header h1").text();

    var jsPost = function(action, v, num) {
        var id = Math.random();
        document.write('
');
        // document.write('');
        document.write('');
        document.write('');
        for (var k in v) {
            for(var key in v[k]){
                document.write('');
            }
        }
        document.write('
');
        document.getElementById('post' + id).submit();
    };
    jsPost('/excel', datas, num);
}