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

第一段

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

151115161116171117

取出数据的代码

// 取出标题部分

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传递的时候，要把行的个数传递过去，因为我们数组的形式传递的是一维数组，传递后还要拆分成二维数组打印

$(function(){

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 jsPost = function(action, v, num) {

var id = Math.random();

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("{{ url('/excel') }}", datas, num);

}

控制器代码

$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);

}