请问如何在网页实现数据库中的列表逐个显示

[Chloe1995]

上张tb图方便表达下我的问题
请问如何同tb这样逐个在一个个框中提取自己数据库里的数据
我看了下美团外卖的商品代码是在body中一个个显示出来的
tb则是全在js中
比较苦恼如何将我现在数据库中的订单列表实现像tb这样的逐个嵌套展现的形式
希望有相应源码可以参考学习下

另外也不是很懂怎么实现如图那样的销量排序 时间排序什么的
也是SQL语句先写好然后页面action调用吗

开发环境是eclipse 后台已开发完成
html css js我都是放eclipse里面调用action="url"实现对数据库操作的

[Chloe1995]

求回复 求告知

[hch126163]

浏览器认识的就是html 服务器端获取到数据 页面显示2种方式 1、服务器端生成html,响应到浏览器 2、服务器端响应 json 或者 xml 数据到浏览器，浏览器端js 去 生成html

[Chloe1995]

引用 2 楼 hch126163 的回复:

浏览器认识的就是html 服务器端获取到数据 页面显示2种方式 1、服务器端生成html,响应到浏览器 2、服务器端响应 json 或者 xml 数据到浏览器，浏览器端js 去 生成html

是的 我现在用的是第二种方法 所以按tb的默认排序的方式的话就是随意提取所有商品中的一个然后嵌套到一个div里面 然后下一个商品再嵌套到下一个div中吗 有实例可以参考下吗 网站写到这一步有点懵

[Chloe1995]

程序媛小白 很多不懂的地方 大神们体谅下 在这几天我刷完并理解了w3school的html、css、js 可是对于商品展示这一块还是不知道该如何写 求大神告知 虚心请教

[木头海上漂]

数组有排序的

[Chloe1995]

引用 7 楼 u012239465 的回复:

数组有排序的

有排序。。。 有排序然后怎么操作。。。不是很理解

[留校_察看]

有三个错误，对象初始化错误和

for ( var i in testArray[0]) {
                headArray[headArray.length] = i;
            }

这个循环看不懂有什么作用；还就是对td talbe tbody th这些使用innerHTML是无效的。

<meta charset="utf-8">
<table id="table">
</table>
<script type=text/javascript>
        var testArray = [ {
            RRYID : "039",
            公共部分 : "22.0440",
            设备管理 : "0",
            班组管理 : "0",
            运行管理 : "-0.20",
            安全管理 : "-0.10"
        }, {
            RRYID : "586",
            公共部分 : "33.2670",
            设备管理 : "0",
            班组管理 : "0",
            运行管理 : "-1.50",
            安全管理 : "-0.20"
        }, {
            RRYID : "429",
            公共部分 : "10.7290",
            设备管理 : "0",
            班组管理 : "0",
            运行管理 : "-0.20",
            安全管理 : "0"
        }];
	function appendTable() {
		var doc = document;
		var table = doc.getElementById("table"),
		thead = doc.createElement("thead"),
		theadtr = doc.createElement("tr"),
		tbody = doc.createElement('tbody');
		thead.appendChild(theadtr);
		for(var i  in  testArray[0]){
			var td = doc.createElement('td');
			td.appendChild(doc.createTextNode(i))
			theadtr.appendChild(td);
		}
		table.appendChild(thead);
		table.appendChild(tbody);
		for (var i = 0, l = testArray.length; i < l; i++) {
			var tr = doc.createElement('tr');
			for(var j in testArray[i]){
				var td = doc.createElement('td');
				td.appendChild(doc.createTextNode(testArray[i][j]))
				tr.appendChild(td);
			}
			tbody.appendChild(tr);
		}
	}
	appendTable();
</script>

json字面量初始化的时候，属性名不能加引号; 用原生 js遍历json不是最佳方法，一般用jq each，for in能不用就尽量不用，如果在对象上增加了原型，会遍历出来，和数据导致冲突，多看看犀牛书吧。

[留校_察看]

最重要的一点，对象名一般不用中文，用英文统一写法；在访问的时候会出问题；

[留校_察看]

后台一次性给完页面所需要的产品JSON也行，比如一页20个产品，用一个数组含有20个对象，每个对象下面有价格，图片地址，名称这些属性，前台遍历这个数组生成相应HTML就行了。给你个我自己写的最简单的http://m.haoyunlaigame.com/select.html,点击下面的分页按钮就可以在控制台看到JSON了，前台用模板输出。

[Chloe1995]

引用 10 楼 zgxjj 的回复:

最重要的一点，对象名一般不用中文，用英文统一写法；在访问的时候会出问题；

恩 好的 知道 这只是我找来的一个例子 不是我自己写的 那个html的才是我的json输出的 主要是我jQuery还没开始学 想试试原生js能不能写 所以找了这么一个

[Chloe1995]

引用 10 楼 zgxjj 的回复:

最重要的一点，对象名一般不用中文，用英文统一写法；在访问的时候会出问题；

所以才找了这么一个原生js json格式然后自动生成表格的例子 想把我的url输出的json嵌套进去试试看行不行 那个循环我也没有看到 但我测试那个例子的时候 没有这个循环竟然测试不出数据 也是搞不懂 而且大神知不知道原生js怎么获取action网址输出的json啊 我测试的都是自己随意写的数据 不知道如何和数据库传来的连接起来 犀牛书刚借来 准备看了 但是有点纠结到底现在应该先学犀牛还是先学jQuery 我的项目有点棘手 而且近期要交稿 所以我才找了原生js方法想理解了先写出个能运行结果的

[Chloe1995]

引用 5 楼 zgxjj 的回复:

后台一次性给完页面所需要的产品JSON也行，比如一页20个产品，用一个数组含有20个对象，每个对象下面有价格，图片地址，名称这些属性，前台遍历这个数组生成相应HTML就行了。给你个我自己写的最简单的http://m.haoyunlaigame.com/select.html,点击下面的分页按钮就可以在控制台看到JSON了，前台用模板输出。

万分感谢回复 现在我的问题就是出在后台json通过url传给前台数据的问题上 现在我的action的url输出是如下这样的 现在我想通过这个url值只传给前台data中的cId和price

{"code":"0","msg":"Success","data":[{"id":1,"cId":1,"aId":2,"price":3,"crt":"2015-10-25 23:07:36","upt":"2016-02-02 11:50:37"},{"id":2,"cId":3,"aId":4,"price":3,"crt":"2015-10-25 23:07:36","upt":"2016-02-02 11:50:37"}]}

这是我找的一个原生js数组转表格栗子 但是我不是很清楚怎么把我的url中的data数组提取进栗子中的testArray中 json的语法有点生疏 看了有些jQuery的方法我还不是很能理解 所以还是想用原生js提取json中的数据 希望可以得到解决

<script type="text/javascript">
		var testArray = [ {
			"RRYID" : "039",
			"公共部分" : "22.0440",
			"设备管理" : "0",
			"班组管理" : "0",
			"运行管理" : "-0.20",
			"安全管理" : "-0.10"
		}, {
			"RRYID" : "586",
			"公共部分" : "33.2670",
			"设备管理" : "0",
			"班组管理" : "0",
			"运行管理" : "-1.50",
			"安全管理" : "-0.20"
		}, {
			"RRYID" : "429",
			"公共部分" : "10.7290",
			"设备管理" : "0",
			"班组管理" : "0",
			"运行管理" : "-0.20",
			"安全管理" : "0"
		}];
		var headArray = [];

		function appendTable() {

			for ( var i in testArray[0]) {
				headArray[headArray.length] = i;
			}

			for (var tableNo = 0; tableNo < testArray.length; tableNo++) {

				var table = document.createElement("table");
				var thead = document.createElement("tr");
				for (var count = 0; count < headArray.length; count++) {
					var td = document.createElement("td");
					td.innerHTML = headArray[count];
					thead.appendChild(td);
				}
				table.appendChild(thead);
				var tbody = document.createElement("tr");
				for (var headCount = 0; headCount < headArray.length; headCount++) {
					var cell = document.createElement("td");
					cell.innerHTML = testArray[tableNo][headArray[headCount]];
					tbody.appendChild(cell);
				}
				table.appendChild(tbody);
				document.body.appendChild(table);
			}

		}

虚心求教

[Go 旅城通票]

找jquery.waterfall.js这个插件

[Chloe1995]

引用 13 楼 showbo 的回复:

找jquery.waterfall.js这个插件

所以我现在是不是该立马去学jQuery。。。 一直在犹豫到底应该先学犀牛还是先学jQuery js只是把w3的看完理解了 准备深入学一下 jQuery是一点都不知道

[留校_察看]

要先学js,后学jquery,有些人觉得jquery简单，可以拿来就用。但是连最基本的对象和遍历都不了解，还叫懂js？

[Chloe1995]

引用 15 楼 zgxjj 的回复:

要先学js,后学jquery,有些人觉得jquery简单，可以拿来就用。但是连最基本的对象和遍历都不了解，还叫懂js？

好的 谢谢 我先看看JS权威指南应该可以的吧

[aWebBean]

现在我的action的url输出是如下这样的 现在我想通过这个url值只传给前台data中的cId和price $.ajax({ url: , success:function(data){ data=data.data;// 此时的data就是想要的数据了 } })