需求场景:需要同时提交多条数据到数据库的应用场景,如保存购物订单等
思路:前台js获取需要提交数据,拼写成json字符串传入后台,后台解析保存数据库。
实例:
function makeJson(){
var rows = document.getElementById("Table").rows; //获得行数(包括thead) var colums = document.getElementById("Table").rows[0].cells.length; //获得列数 console.log(rows); console.log(colums); console.log(rows[1].cells[2]); var arr=[]; //json对象容器 var obj={"id":"", //创建数据对象 "set_id":"", "islist":"", "isedit":"", "dict_type":"", "column_name":"", "java_type":"", "java_attribute_name":"", "isnull":"", "data_type":"", "isquery":"", "query_type":"", "isshowinlist":"", "ispk":"", "show_type":"", "column_comment":"", "sort":"" }; for(var i=1;i<rows.length;i++){ //获取表格数据,因为列数已经固定,所以直接获取了,其实可以通过循环遍历来的到 var obj = new Object();//这里一定要new新的对象,要不然保存的都是一样的数据;都是最后一行的数据 obj.column_name=$("#column_name"+i).val(); obj.column_comment=$("#column_comment"+i).val(); obj.data_type=$("#data_type"+i).val(); obj.java_type=$("#java_type"+i).val(); obj.java_attribute_name=$("#java_attribute_name"+i).val(); obj.ispk=$("#ispk"+i).val(); obj.isnull=$("#isnull"+i).val(); obj.isedit=$("#isedit"+i).val(); obj.islist=$("#islist"+i).val(); obj.isshowinlist=$("#isshowinlist"+i).val(); obj.isquery=$("#isquery"+i).val(); obj.query_type=$("#query_type"+i).val(); obj.show_type=$("#show_type"+i).val(); obj.dict_type=$("#dict_type"+i).val(); obj.sort=$("#sort"+i).val(); arr.push(obj);//向JSON数组添加JSON对象的方法;很关键 } ///格式化数据 var jsonobj=JSON.stringify(arr);//这一行很关键 //将数据赋值通过按钮提交到后台 $("#jsonString").val(jsonobj);
}