Js前端传递json数组至服务器端并解析的实现。

最近做的一个小项目中需要将json数组数据传递到服务器端进行保存,现分享一下解决思路。

环境:EasyUi+Mvc 4.0

如下:

在上述截图中的红色圈起来的部分,需要在点击保存后通过一次ajax请求,完成数据保存。

很多项目都存在这样的需求,所以了解解决办法很重要。

分析过程:

红色圈起部分分两块,一块是图片,包含字段“图片路径”和“图片说明”,可以推断出json数据格式{‘图片路径‘:xxx,‘图片说明‘:xxx}。

一块是子物料集合,包含字段“子物料编号”和“备注”,可以推断出json格式{‘子物料编号‘:xxx,‘备注‘:xxx}。

然而这两块的数据是多条的,所以想到用js“[]”(js数组)进行存储。

也就是可以写出如下代码:

   //图片实体 与后台属性一致
    function Part_Pic(ImgDescription, ImgUrl) {
        this.ImgDescription = ImgDescription;
        this.ImgUrl = ImgUrl;
        return this;
    }
    //子物料实体 与后台属性一致
    function Part_Children(ChildMaterialNumber, Remark) {
        this.ChildMaterialNumber = ChildMaterialNumber;
        this.Remark = Remark;
        return this;
    }

   //有一个函数用来取数据并填充至数组内
   function Save()
   {
      var Part_PicList = [];            //定义图片数组,用于存放多条图片信息
      var Part_ChildrenList = [];       //定义子物料数组
      //接下来拿到数据并填充,以下为范例
      var PartPicObj=new Part_Pic(‘这是图片描述‘,‘这是图片链接‘);
      Part_PicList.push(PartPicObj); //填充
   }  

好了,接下来有个关键的地方,就是如何把这两个js数组传递到服务端并解析。

这里用到了json的序列化和反序列化知识。

一般的ajax请求如下:

       $.ajax({
            url: "/Part/Get_Details",
            type: "POST",
            dataType: "json",
            data: { "ID": row["ID"] },
            success: function (res) {
               //该干嘛干嘛
            },
            error: function (error) {
                alert(JSON.stringify(error));
            }
        });

对于“data”,直接传递js数组的话,服务端接收到的是这么个东西 “[object,object]”,可见服务端根本不认识它。

好在js有个序列化函数,将对象序列化为“json字符串”。

JSON.stringify(WorkList)  //微软官方解释:https://msdn.microsoft.com/library/cc836459(v=vs.94).aspx

参数

value


必需。 要转换的 JavaScript 值(通常为对象或数组)。

返回值

一个包含 JSON 文本的字符串。

也就是说将“js数组”通过该函数序列化后创建了新的“字符串”。“字符串”对于服务器端来说不管哪种语言都是可以识别的。

那么ajax请求就可以这么写:

 $.ajax({
       url: "/Part/Get_Details",
       type: "POST",
       dataType: "json",
       data:        {
         "ID": row["ID"] ,
         "Part_ChildrenList":JSON.stringify(Part_ChildrenList) //序列化
       },
      success: function (res)
      {
       //该干嘛干嘛
      },
      error: function (error) {
         alert(JSON.stringify(error));  //这个地方也用到了
      }
 });                

好了,接下来要解决的问题就是如何在服务端进行解析,用到了对象反序列化。

我这里用到的是Newtonsoft.Json,在MVC4.0的项目中是默认引用的。

Newtonsoft.Json.JsonConvert是一个微软的免费json转换工具。

Newtonsoft.Json 是.NET 下开源的json格式序列号和反序列化的类库.

用法:

List<实体> listwork = new List<实体>();
listwork = Newtonsoft.Json.JsonConvert.DeserializeObject<List<实体>>("前台传过来的json字符串");

就是这么一句话就完成了json字符串的反序列化。ps:真是简单。

至此,就有了完全的解决思路,接下来就是撸代码的工作了。

部分代码:

//图片实体 与后台属性一致
    function Part_Pic(ImgDescription, ImgUrl) {
        this.ImgDescription = ImgDescription;
        this.ImgUrl = ImgUrl;
        return this;
    }
    //子物料实体 与后台属性一致
    function Part_Children(ChildMaterialNumber, Remark) {
        this.ChildMaterialNumber = ChildMaterialNumber;
        this.Remark = Remark;
        return this;
    }

    //保存
    function SaveEntity() {
        //定义图片集合
        var Part_PicList = [];
        $.each($("#yulan_div").find("div"), function () {
            var desobj = $(this).find("input[name=‘ImgDescription‘]");
            var urlobj = $(this).find("div").find("img[name=‘ImgUrl‘]");
            if (desobj.length > 0 && urlobj.length > 0) {
                var picobj = new Part_Pic(desobj.val(), urlobj.attr("src"));
                Part_PicList.push(picobj); //填充数组
            }
        });

        //定义子物料集合
        var Part_ChildrenList = [];
        $.each($("#childrentable tbody tr"), function () {
            var childrenobj = new Part_Children();
            var tdObj = $(this).find("td");
            $.each(tdObj, function (index) {
                //是否有文本框
                var hasText = tdObj.find("input[type=‘text‘]").length;

                if (hasText <= 0)
                {
                    //子物料编号
                    if (index == 1) {
                        childrenobj.ChildMaterialNumber = $(this).html();
                    }
                    else if (index == 2)//备注
                    {
                        childrenobj.Remark = $(this).html();
                    }
                }
            });

            if (childrenobj.ChildMaterialNumber != undefined) {
                Part_ChildrenList.push(childrenobj);//填充数组
            }

        });

        $(‘#fmDetail‘).form(‘submit‘, {
            url: "/Part/Save",
            onSubmit: function (param) { //提交时触发
                //easyui提交时增加参数
                param.Part_PicList = JSON.stringify(Part_PicList);//关键点,对数组进行json序列化,不然无法传递到服务端
                param.Part_ChildrenList = JSON.stringify(Part_ChildrenList);
                var flag = $(this).form(‘validate‘);    //是否通过验证
                if (flag) {
                    $(‘#grid‘).datagrid("loading"); //如果通过验证让datagrid显示载入状态
                }
                return flag;
            },
            success: function (res) {
                if (res == "ok") {
                    $.messager.show({
                        title: ‘操作提示‘,
                        msg: ‘<img src="/images/icons/bigyes.png" />&nbsp;&nbsp;保存成功‘,
                        timeout: 2000,
                        showType: ‘slide‘
                    });

                    $(‘#DivAdd‘).dialog(‘close‘);         //关闭弹出框
                    $(‘#fmDetail‘).form(‘clear‘);         //清除表单数据。
                    $(‘#btnSearch‘).click();              //重新加载数据
                }
                else {
                    $.messager.show({
                        title: ‘错误提示‘,
                        msg: ‘<img src="/images/icons/bigno.png" />&nbsp;&nbsp;保存失败!请联系管理员或尝试重新操作。‘,
                        timeout: 0,
                        width: 320,
                        showType: ‘slide‘
                    });

                }
            }
        })
    }

前端js(包含easyui用法)

public void SetChildren(PartView entity)
        {
            entity.Part_PicList = Newtonsoft.Json.JsonConvert.DeserializeObject<List<Part_Pic>>(Request["Part_PicList"]);
            entity.Part_ChildrenList = Newtonsoft.Json.JsonConvert.DeserializeObject<List<Part_Children>>(Request["Part_ChildrenList"]);

            bool resultchild = Part_ChildrenBLL.Instance.Where("[email protected]").Parms(entity.ID)
                 .Update("IsDel=1");
            if (resultchild)
            {
                foreach (var item in entity.Part_ChildrenList)
                {
                    item.PartID = entity.ID;
                    Part_ChildrenBLL.Instance.Add(item, new string[] { "PartID", "ChildMaterialNumber", "Remark" });
                }
            }
            bool resultpic = Part_PicBLL.Instance.Where("[email protected]").Parms(entity.ID)
                 .Update("IsDel=1");
            if (resultpic)
            {
                foreach (var item in entity.Part_PicList)
                {
                    item.PartID = entity.ID;
                    Part_PicBLL.Instance.Add(item, new string[] { "PartID", "ImgUrl", "ImgDescription" });
                }
            }
        }

C#服务器端代码

文笔不佳,请多多指教。

勤奋是一种生活态度,你如何对待生活,生活就如何对待你。

时间: 2024-10-12 00:25:02

Js前端传递json数组至服务器端并解析的实现。的相关文章

AFNetWorking传递json数组

在使用AFNetWorking的时候 有时候会遇到要传递一个数组到服务器,这时候传递JSON就比较方便了 NSError *jsonError; NSData *jsonData = [NSJSONSerialization dataWithJSONObject:#你的数据源数组# options:NSJSONWritingPrettyPrinted error:&jsonError]; NSString *jsonString = [[NSString alloc] initWithData:

MVC中使用ajax传递json数组

解决方法 去www.json.org下载JSON2.js再调用JSON.stringify(JSONData)将JSON对象转化为JSON串. var people = [{ "UserName": "t1", "PassWord": "111111", "Sex": "男" }, { "UserName": "t2", "PassWor

ajax使用json数组------前端往后台发送json数组及后台往前端发送json数组

1.引子 Json是跨语言数据交流的中间语言,它以键/值对的方式表示数据,这种简单明了的数据类型能被大部分编程语言理解.它也因此是前后端数据交流的主要方式和基础. 2.前端往后台传输json数据 第一步,先应该定义一个JSON对象或JSON数组.json对象是“var jsonObj={“name1”:“value1” , “name2”:“value2” , “name3”:“value3”,…};”的格式定义,而json数组则是以中括号"[ ]"包裹多个json对象的格式定义,如

Js 中对 Json 数组的常用操作

我们首先定义一个json数组对象如下: var persons = [ {name: "tina", age: 14}, {name: "timo", age: 15}, {name: "lily", age: 16}, {name: "lucy", age: 16} ] 一. 根据对象属性值得到相应对象 //1. 获取 name 等于 lily 的对象 var lily = persons.filter((p) =>

JS向后台传递json数组对象

var Obj = []; //一下代码可以循环插入 var returnObj = new Object();//创建一个对象 returnObj.id = "123": returnObj.money = 456""; Obj.push(returnObj); JS中将Obj对象进行序列化操作 Obj = JSON.stringify(Obj); //发送ajax请求$.ajax({ type : "POST", url : top.base

webpages框架使用@razor语法向js代码传递Json字符串

进入web开发时间太短,一个人尝试着做了几个初级项目,遇到了太多的困难.尽管不是学开发专业的,仅为爱好所以硬着头皮坚持了下来. 将遇到的问题记录下来,备查. 使用vs2015中asp.net razor3网站模板作为基础逐渐扩展,遇到了服务器传递回js的Json字符串错误. 错误表现:原本字符串中的转义字符  \"   ,通过 @变量名 传递到js代码中,变成了 " 在网上检索了一下,遇到这个问题的不多,应该是初级错误: 看了一篇文章,其原因如下:为了防止某些攻击,系统将敏感字符进行了

JS 前端格式化JSON字符串工具

JSON格式化工具,简易实现.作为技术宅,直接上代码,供大家使用.前提:一定要引入jquery哦. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> #btn{width:100px;height:30px;line-height:30px;text-align:center;display:block;margin

JS AJAX传递List数组到后台

http://blog.csdn.net/lingxyd_0/article/details/10428785 今天在写代码的时候,碰到的问题,百度了一下,发现原来AJAX传递List数据是可以的,之前还一直用JSON序列化(new Array()数组设置)进行传值的. var _list = {}; //等价于 var _list=new Object(); for (var i = 0; i < 10; i++) { _list["后台controller中的接收名字[" +

框架-弹出选择框(Jquery传递Json数组)

给一个button按钮,执行方法 Json传值$("body").on("click", "#btnsure", function() {                var cblInfo = $.asGetValuesOfCtrlName("gridform_myTable", "gridSel", "|");                if (cblInfo.length &