将表单数据序列化为特定的 JSON 格式答案

【问题标题】：Serialize form data into a specific JSON format将表单数据序列化为特定的 JSON 格式
【发布时间】：2016-09-24 22:32:13
【问题描述】：

我有一个如下所示的表单：

<form id="myForm" ng-submit="submitForm()">
    <select name="ItemName" ng-controller="ItemController">
        <option value="" selected disabled>Select</option>
        <option ng-repeat="item in items track by $index" value="{{item.Id}}">{{item.Name}}</option>
    </select>
    <input type="text" name="Description" />

    <button type="submit">Submit</button>
</form>

我的 AngularJS FormController 然后执行以下操作：

form.controller.js

app.controller('FormController', function($scope, $http) {

$scope.submitForm = function () {
    $http({
            method: 'POST',
            url: '/Path/To/MVC/Action',
            data: { json: JSON.stringify($('#myForm').serializeArray()) }
        })
        .success(function(data) {
            console.log('success');
        })
        .error(function(error) {
            console.log('failure);
        });
    };
});

我希望我的 MVC 控制器接收如下所示的 json 字符串：

{
    "Name": "some item name",
    "Description": "some item description"
}

使用 serialize()，我得到了类似的东西：

Name=some%20item%20name&Description=some%20item%20description

...使用 serializeArray()，我得到了类似的东西：

[{
    name: "Name",
    value: "some item name"
},
{
    name: "Description",
    value: "some item description"
}]

如何获取我要查找的格式的 JSON 字符串？

【问题讨论】：

标签： javascript c# angularjs json asp.net-mvc

【解决方案1】：

这就是你要找的吗？我有点不清楚项目是什么，等等：

https://plnkr.co/edit/IFHNtxS226Hq0cCMJYi1?p=preview

  $scope.submitForm = function(formData){

    console.warn(formData);

    $http({
            method: 'POST',
            url: '/Path/To/MVC/Action',
            data: { json: formData }
        })
        .success(function(data) {
            console.log('success');
        })
      .error(function(error) {
            console.log('failure');
        })

  }
});

【讨论】：

【解决方案2】：

您在使用 WebAPI 吗？

您可以为此替换您的选择：

<select id="selectId" type="text" ng-required="true" name="nameOfSelect" class="form-control" ng-model="yourModel.ObjectForThisSelect" placeholder="String Inside you Select"
      ng-options="info.Value as info.Text for info in items>
</select>

那么你应该回发“yourModel”对象，这样Angular在回发时只会序列化选定的选项值。

此外，如果您使用 WebApi，您可以检查您的 WebApiConfig 类 Register(HttpConfiguration config) 方法，您正在以所需格式格式化 Json 字符串：即

 var jsonFormatter = GlobalConfiguration.Configuration.Formatters.JsonFormatter;
            jsonFormatter.SerializerSettings.PreserveReferencesHandling = Newtonsoft.Json.PreserveReferencesHandling.Objects;
            jsonFormatter.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Serialize;
            jsonFormatter.SerializerSettings.ContractResolver = new DefaultContractResolver();

【讨论】：