将整个网页的数据上传至数据库 (底部是N行数据一次性传给后台)

人生如若初遇见 2018-06-07 10:36:21


由于我是小白 才学习两个月的js和php,提交数据只会基本form表单提交,我查阅资料把思路给理清楚了 就是不知道代码怎么去写

1丶前台封装数据(json)
怎么去封装
2丶格式化数据
3丶异步提交数据(ajax)
这个我知道
4丶后台解析数据保存到数据库

我不需要你帮我完成,我只想知道有没有这么一个列子 我看一下代码是怎么写的,因为才学两个月很多东西都不是很了解,该用什么不改用什么完全不知道
...全文
1087 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
htcyrylcmj0415 2018-06-08
  • 打赏
  • 举报
回复
引用 2 楼 weixin_41872184 的回复:
[quote=引用 1 楼 htcyrylcmj0415 的回复:] 1前台封装数据,封装的时候就格式化了
function getJson(){
	    var arr = new Array();
        $(".table tr.row").each(function (i, e) {//每一行,选择器自己修改
            var row = {};
            $(e).find("textarea,input,select").each(function (ii, ee) {//每行里面需要提交的数据
                var input = $(ee);
                var obj = {};
                obj["value"] = input.val();
                obj["seq"] = input.next().val();
                row[input.attr("name")] = obj;
            });
            arr.push(row);
        });
        return JSON.stringify(arr);
    }
我问一下 上面是一个div下面另外一个div也这个这样做嘛 然后用ajax提交? 我基础太差了很多东西都不是很懂 都是边做边学
是的,排版看你需求改,前台封装数据就是根据table tr遍历组装的,然后ajax提交后台
  • 打赏
  • 举报
回复
[quote=引用 1 楼 htcyrylcmj0415 的回复:] 1前台封装数据,封装的时候就格式化了
function getJson(){
	    var arr = new Array();
        $(".table tr.row").each(function (i, e) {//每一行,选择器自己修改
            var row = {};
            $(e).find("textarea,input,select").each(function (ii, ee) {//每行里面需要提交的数据
                var input = $(ee);
                var obj = {};
                obj["value"] = input.val();
                obj["seq"] = input.next().val();
                row[input.attr("name")] = obj;
            });
            arr.push(row);
        });
        return JSON.stringify(arr);
    }
我问一下 上面是一个div下面另外一个div也这个这样做嘛 然后用ajax提交? 我基础太差了很多东西都不是很懂 都是边做边学
htcyrylcmj0415 2018-06-07
  • 打赏
  • 举报
回复
1前台封装数据,封装的时候就格式化了
function getJson(){
	    var arr = new Array();
        $(".table tr.row").each(function (i, e) {//每一行,选择器自己修改
            var row = {};
            $(e).find("textarea,input,select").each(function (ii, ee) {//每行里面需要提交的数据
                var input = $(ee);
                var obj = {};
                obj["value"] = input.val();
                obj["seq"] = input.next().val();
                row[input.attr("name")] = obj;
            });
            arr.push(row);
        });
        return JSON.stringify(arr);
    }
上面获取到JSON串之后赋值给页面的hidden,最后form提交,或者不用赋值hidden直接ajax提交也可以 4后台解析
String rowJson = request.getParameter("rowJson") == null ? "" : request.getParameter("rowJson");
JSONArray rowJsonArr = JSONArray.fromObject(rowJson);
之后遍历rowJsonArr,把值写入对应的实体 然后写入数据库
caox_nazi 2018-06-07
  • 打赏
  • 举报
回复
点击提交按钮,上面是一个json对象,下面多条数据的表格可以分为另外一个json对象
//封装数据的对象  
    var PayObj =    
       {    
         O_NBR:"",      
         P_NBR:"",    
         O_AMOUNT:""  ,  
         P_DT:"",  
         P_HL_ZH:"",  
         P_PAY_TYP:"",  
         P_POS:"",  
         P_U_ZH:"",  
         P_U_HM:"",  
         P_ATTR_IMGS:"",  
         P_RECEIPT_NBR:""  
       }  
// JSON字符串转换JSON对象
var a = JSON.parse("{\"title\":\"\",\"data\":[]}"); 
比如点击保存按钮触发这个方法获取到上面你的每一个值的,这里只写出你要传下面那个table的多个值
function getChecked() {  
        $(选择器).each(function() {  
// 遍历table每一行数据 传给json对象
            var PayObj = new Object();  
           
            PayObj.requestTransNo = ;  
            PayObj.cardNo = ;  
            PayObj.cardUser =  ;  
            PayObj.dealDate =;  
            PayObj.orderId =   
            PayObj.tranNo =;  
            PayObj.refundAmt =;  
            PayObj.refundReason = document.getElementById('refundReason').value;  
      
            a.data.push(PayObj);//向JSON数组添加JSON对象的方法;很关键  
        });  

}  
///格式化数据  
var obj=JSON.stringify(a);//这一行很关键  

// 异步提交数据
$.ajax({  
        type: "post",  
        url : "${ctx}/refund/transferPaymentReback/ajaxRefundTransferPaymentReback.do",  
        dataType: "json",  
        cache: true,  
        data:{'param':obj},  
        success: function (data) {  
            $("#doSave").attr("disabled",false);  
            showAlertMsg(data.flag.errorMsg, {  
                closeFunction: function () {  
                    if (data.flag.success == true) {  
                        window.location.href="${ctx}/member/relation/bankOfHuaXiaManager.do"  
                    }  
                }  
            });  
        },  
        error: function () {  
            $("#doSave").attr("disabled",false);  
            alertMsg(null, false, null, null, "调用接口失败,请稍后重试!");  
        }  
    });

//后台解析接收数据
String param = request.getParameter("param");  
        JSONObject json=JSONObject.fromObject(param);  
        List<Map<String,String>> payList=json.getJSONArray("data"); 

87,884

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧