表单结构复杂将如何安全有效的提交到后台

反转皇潮 2018-05-21 12:29:29

如图，这些信息比较多，我删除了一些数据，主要分三份我放在一个表单里面，统一提交，
英文上面连个模板的内容会关联到下面的内容，三个模板都可以增删改，着都不是重点，在用户点击提交的时候，需要把这些信息提交到后台，这个时候有什么好的办法提交提到后台，个人愚笨，用的方法很傻，个位大神莫笑

...全文

1402 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

绿龙术士 2018-05-30

打赏
举报

可以在后台做个用户验证，保证不是外来者调用了你的服务。

大鱼> 2018-05-25

打赏
举报

引用 3 楼 sp1234 的回复:

你的头像很漂亮。前端技术应该学现代派，不要学20年前的技术。

一股设计师气息

peng2739956 2018-05-25

打赏
举报

我个人觉得，如果你的这个非常之多的话，我建议你直接将这些模板之内的用ID 传输到后台，后台再次查询一遍，这个仅限于不需要进行编辑的东西，如果需要上传需要编辑的模板，那么就将form 递交到后台，后台用实体接收就行，不需要用webapi，单纯的ashx和mvc 都可以，webservice，WCF 都行。这个没所谓。

stevenjin 2018-05-23

打赏
举报

用post将数据包裹在body内提交

E次奥 2018-05-23

打赏
举报

json

反转皇潮 2018-05-23

打赏
举报

各位用的多的做法是哪个呀我学习下

反转皇潮 2018-05-21

打赏
举报

//文件名称备选 tb_th.find("select[name='sel_file_title']").eq(i).parents("tr").find("input[name='file_name_label_title']").each(function () { var file_name_label_title = $(this).val(); var file_name_label_title_en = $(this).parents("ul").find("input[name='file_name_label_title_en']").val(); var file_name_label_type = $(this).parents("ul").find("input[name='file_name_label_type']").val(); var label_group_name = $(this).parents(".doc_select_box").find("input[name='label_group_name']").val(); if (file_name_label_title == "") { $(this).addClass("error_color"); $(this).parents("td").find(".oper_btn a").addClass("error_color"); if (all_pd_one_th == undefined) { all_pd_one_th = $(this).parents("td").find(".oper_btn a"); } all_pd = false; } if (file_name_label_title_en == "") { $(this).parents("ul").find("input[name='file_name_label_title_en']").addClass("error_color"); $(this).parents("td").find(".oper_btn a").addClass("error_color"); if (all_pd_one_th == undefined) { all_pd_one_th = $(this).parents("td").find(".oper_btn a"); } all_pd = false; } if (file_name_label_type == "") { $(this).parents("ul").find("input[name='file_name_label_type']").addClass("error_color"); $(this).parents("td").find(".oper_btn a").addClass("error_color"); if (all_pd_one_th == undefined) { all_pd_one_th = $(this).parents("td").find(".oper_btn a"); } all_pd = false; } if (label_group_name == "") { $(this).parents(".doc_select_box").find("input[name='label_group_name']").addClass("error_color"); $(this).parents("td").find(".oper_btn a").addClass("error_color"); if (all_pd_one_th == undefined) { all_pd_one_th = $(this).parents("td").find(".oper_btn a"); } all_pd = false; } file_demo += file_name_label_title + "~"; file_demo += file_name_label_title_en + "~"; file_demo += file_name_label_type + "~"; file_demo += label_group_name; file_demo += "|"; }) file_demo += "∞"; //文件签字备选 tb_th.find("select[name='sel_file_title']").eq(i).parents("tr").find("input[name='file_signature_label_signature']").each(function () { var file_signature_label_signature = $(this).val(); var file_signature_label_signature_en = $(this).parents("ul").find("input[name='file_signature_label_signature_en']").val(); var file_signature_label_type = $(this).parents("ul").find("input[name='file_signature_label_type']").val(); var label_group_name = $(this).parents(".doc_select_box").find("input[name='label_group_name']").val(); if (file_signature_label_signature == "") { $(this).addClass("error_color"); $(this).parents("td").find(".oper_btn a").addClass("error_color"); if (all_pd_one_th == undefined) { all_pd_one_th = $(this).parents("td").find(".oper_btn a"); } all_pd = false; } if (file_signature_label_signature_en == "") { $(this).parents("ul").find("input[name='file_signature_label_signature_en']").addClass("error_color"); $(this).parents("td").find(".oper_btn a").addClass("error_color"); if (all_pd_one_th == undefined) { all_pd_one_th = $(this).parents("td").find(".oper_btn a"); } all_pd = false; } if (file_signature_label_type == "") { $(this).parents("ul").find("input[name='file_signature_label_type']").addClass("error_color"); $(this).parents("td").find(".oper_btn a").addClass("error_color"); if (all_pd_one_th == undefined) { all_pd_one_th = $(this).parents("td").find(".oper_btn a"); } all_pd = false; } if (label_group_name == "") { $(this).parents(".doc_select_box").find("input[name='label_group_name']").addClass("error_color"); $(this).parents("td").find(".oper_btn a").addClass("error_color"); if (all_pd_one_th == undefined) { all_pd_one_th = $(this).parents("td").find(".oper_btn a"); } all_pd = false; } file_demo += file_signature_label_signature + "~"; file_demo += file_signature_label_signature_en + "~"; file_demo += file_signature_label_type + "~"; file_demo += label_group_name; file_demo += "|"; }) file_demo += "ˇ"; } file_demo += "∽"; }) file_demo += "⊙"; })

反转皇潮 2018-05-21

打赏
举报

主要提交时代码，我这里是用特殊字符分隔保存成一个字符串提交到后台 var file_demo = "";//储存值 $("#file_html").find(".div_file_template").each(function () { var div_file_template_th = $(this); var template_name = div_file_template_th.find("input[name='template_name']").val(); if (template_name == "") { div_file_template_th.find("input[name='template_name']").addClass("error_color"); if (all_pd_one_th == undefined) { all_pd_one_th = div_file_template_th.find("input[name='template_name']"); } all_pd = false; } var name_count = 0; $("#file_html").find("input[name='template_name']").each(function () { if ($(this).val() == template_name && template_name != "") { name_count++; } }) if (name_count > 1) { file_demo_msg = "模板名称不能相同"; return false; } file_demo += template_name + "∷"; div_file_template_th.find(".document_table_html table").each(function (table_index) { var tb_th = $(this); var process_title_z = tb_th.find("input[name='process_title_z']").val().trim();//步骤名称 var process_title_en = tb_th.find("input[name='process_title_en']").val().trim();//步骤Name if (process_title_z == "") { tb_th.find("input[name='process_title_z']").addClass("error_color"); if (all_pd_one_th == undefined) { all_pd_one_th = tb_th.find("input[name='process_title_z']"); } all_pd = false; } if (process_title_en == "") { tb_th.find("input[name='process_title_en']").addClass("error_color"); if (all_pd_one_th == undefined) { all_pd_one_th = tb_th.find("input[name='process_title_en']"); } all_pd = false; } file_demo += process_title_z + "~"; file_demo += process_title_en; file_demo += "^"; //2.文件信息 for (var i = 0; i < tb_th.find("select[name='sel_file_title']").length; i++) { var file_title = tb_th.find("select[name='sel_file_title']").eq(i).val();//标题 var title_en = tb_th.find("input[name='file_title_en']").eq(i).val().trim();//标题英文 var signature = tb_th.find("input[name='file_signature']").eq(i).val().trim();//负责签字 var signature_en = tb_th.find("input[name='file_signature_en']").eq(i).val().trim();//负责签字-英文 var remark = tb_th.find("input[name='file_remark']").eq(i).val().trim();//备注 var remark_en = tb_th.find("input[name='file_remark_en']").eq(i).val().trim();//备注-英文 if (file_title == "") { tb_th.find("select[name='sel_file_title']").eq(i).addClass("error_color"); if (all_pd_one_th == undefined) { all_pd_one_th = tb_th.find("select[name='sel_file_title']").eq(i); } all_pd = false; } if (title_en == "") { tb_th.find("input[name='file_title_en']").eq(i).addClass("error_color"); if (all_pd_one_th == undefined) { all_pd_one_th = tb_th.find("input[name='file_title_en']").eq(i); } all_pd = false; } if (signature == "") { tb_th.find("input[name='file_signature']").eq(i).addClass("error_color"); if (all_pd_one_th == undefined) { all_pd_one_th = tb_th.find("input[name='file_signature']").eq(i); } all_pd = false; } if (signature_en == "") { tb_th.find("input[name='file_signature_en']").eq(i).addClass("error_color"); if (all_pd_one_th == undefined) { all_pd_one_th = tb_th.find("input[name='file_signature_en']").eq(i); } all_pd = false; } file_demo += file_title + "~"; file_demo += title_en + "~"; file_demo += signature + "~"; file_demo += signature_en + "~"; file_demo += remark + "~"; file_demo += remark_en; file_demo += "∞"; //3.获取文件规格 tb_th.find("select[name='sel_file_title']").eq(i).parents("tr").find(".select_box").each(function () { var format_number = $(this).find("select[name='format_number']").val(); var format_type = $(this).find("select[name='format_type']").val(); var format_format = $(this).find("select[name='format_format']").val(); file_demo += format_number + "~"; file_demo += format_type + "~"; file_demo += format_format; file_demo += "|"; }) file_demo += "∞";

风陵初遇误终身 2018-05-21

打赏
举报

要么前端控制，要么后端组建，方法本质都是这样。

反转皇潮 2018-05-21

打赏
举报

这个兄弟“这个季节很冷 ”所说就是拼接json传到后台解析保存，这样结构是要清晰很多

风陵初遇误终身 2018-05-21

打赏
举报

表单：

    

<form id="mapform" action="home/formmodel" method="post">

        <p>

            地图名称：<input name="mapname" value="守卫剑阁 神昏末劫" type="text" />

        </p>

        <div>

            <p>装备名称：<input name="equipname" value="八阵图" type="text" /></p>

            <p>装备属性：<input name="equipattr" value="攻击力+420，所有属性+350" type="text" /></p>

            <p>装备价格：<input name="equipprice" value="11000" type="text" /></p>

        </div>

        <div>

            <p>装备名称：<input name="equipname" value="诸神黄昏" type="text" /></p>

            <p>装备属性：<input name="equipattr" value="攻击力+450，护甲+100，所有属性+150" type="text" /></p>

            <p>装备价格：<input name="equipprice" value="162" type="text" /></p>

        </div>

        <div>

            <p>装备名称：<input name="equipname" value="末日浩劫" type="text" /></p>

            <p>装备属性：<input name="equipattr" value="所有属性+150，移动240" type="text" /></p>

            <p>装备价格：<input name="equipprice" value="162" type="text" /></p>

        </div>

        <p><input type="submit" value="提交" /> </p>

    </form>

mvc/webapi 参数接收实体
实体：



public class MapParams

{

    public string MapName { get; set; }



    public List<string> EquipName { get; set; }



    public List<string> EquipAttr { get; set; }



    public List<string> EquipPrice { get; set; }

}

请求提交（直接序列化表单提交）：



$("#mapform").on("submit", function (envent) {

            envent.preventDefault();

            var form = $(this);

            $.ajax({

                url: form.attr("action"),

                type: form.attr("method"),

                data: form.serialize(),

                dataType: "json",

                success: function (data) {

                    console.log(data);

                }

            });

        });

最终接收到的参数

这种接收方式主要是需要在后台去重新组装请求参数，然后验证。
也可以在前端先组装好JSON对象，然后再提交，原理一致。

mvc/webapi参数接收实体



public class MapParams

{

    public string MapName { get; set; }



    public List<EquipParams> EquipList { get; set; }

}



public class EquipParams

{

    public string EquipName { get; set; }



    public string EquipAttr { get; set; }



    public string EquipPrice { get; set; }

}

请求提交（构建JSON）：



$("#mapform").on("submit", function (envent) {

    envent.preventDefault();



    //构建 JSON 对象

    var map = {

        MapName: "守卫剑阁 神昏末劫", EquipList: [

            { EquipName: "八阵图", EquipAttr: "攻击力+420，所有属性+350", EquipPrice: 11000 },

            { EquipName: "诸神黄昏", EquipAttr: "攻击力+450，护甲+100，所有属性+150", EquipPrice: 162 },

            { EquipName: "末日浩劫", EquipAttr: "所有属性+150，移动240", EquipPrice: 162 }

        ]

    }



    var form = $(this);

    $.ajax({

        url: form.attr("action"),

        type: form.attr("method"),

        contentType: 'application/json',

        data: JSON.stringify(map),

        dataType: "json",

        success: function (data) {

            console.log(data);

        }

    });

});