Javascript 如何处理复杂Angular.js web表单中的提交数据_Javascript_Jquery_Ajax_Angularjs_Form Submit

Javascript 如何处理复杂Angular.js web表单中的提交数据

javascript jquery ajax angularjs

Javascript 如何处理复杂Angular.js web表单中的提交数据,javascript,jquery,ajax,angularjs,form-submit,Javascript,Jquery,Ajax,Angularjs,Form Submit,我的web表单（使用Bootstrap 3和Angular.js 1.3构建）很长，并且有一定的动态性。换句话说，在一些情况下，表格排列的输入字段和其他带有相关“添加另一个”按钮的常规输入字段，以及一些基于前面字段中的输入或选择切换（隐藏/显示）的输入字段。在controller JS中，我在作用域中设置了一个对象来保存所有表单数据，如下所示： // Angular.js controller function $scope.formData = {}; <html data-ng-ap

我的web表单（使用Bootstrap 3和Angular.js 1.3构建）很长，并且有一定的动态性。换句话说，在一些情况下，表格排列的输入字段和其他带有相关“添加另一个”按钮的常规输入字段，以及一些基于前面字段中的输入或选择切换（隐藏/显示）的输入字段。在controller JS中，我在作用域中设置了一个对象来保存所有表单数据，如下所示：

// Angular.js controller function
$scope.formData = {};

<html data-ng-app="formApp">
  <body>
    <form class="form form-horizontal" data-ng-controller="formController">
      <div class="form-group">
        <label class="control-label" for="username">Username</label>
        <input type="text" name="username" data-ng-model="formData.username" class="form-control" data-ng-minlength="3" data-ng-maxlength="8" required>
      </div>
    </form>
  </body>
</html>

在表单的HTML中，我用

ng model

备份了所有字段，如下所示：

// Angular.js controller function
$scope.formData = {};

<html data-ng-app="formApp">
  <body>
    <form class="form form-horizontal" data-ng-controller="formController">
      <div class="form-group">
        <label class="control-label" for="username">Username</label>
        <input type="text" name="username" data-ng-model="formData.username" class="form-control" data-ng-minlength="3" data-ng-maxlength="8" required>
      </div>
    </form>
  </body>
</html>

我想使用

$http

将数据异步发布到ASP.NET通用http处理程序，该处理程序将处理表单提交并以JSON格式响应。发布数据的推荐方法是什么？当我使用

JSON.parse（$scope.formData）

时，对象被分解为各个请求参数，而不是作为单个对象提交。如果我将对象作为单个对象传递，那么如何处理表单提交的数据？理想情况下，我希望将整个

formData

对象转换为一个C#DTO对象，我可以在服务器端使用它。

首先，您可以使用post方法提交$scope.formData，就像使用$http（）一样，然后在服务器端，您可以使用Newtonsoft反序列化请求数据

也许是做这样的事情

fromData =  JSON.stringify($scope.formData)

$http.post('/someUrl', {fromData:  fromData})
.success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});

public HttpResponseMessage Post(string jsonstring)
{
     GenerForm frm = JsonConvert.DeserializeObject<GenerForm>(json);
     string username = frm.username;      
}

服务器将是这样的

fromData =  JSON.stringify($scope.formData)

$http.post('/someUrl', {fromData:  fromData})
.success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});

public HttpResponseMessage Post(string jsonstring)
{
     GenerForm frm = JsonConvert.DeserializeObject<GenerForm>(json);
     string username = frm.username;      
}

public httpresponsemessagepost（字符串jsonstring）
{
GenerForm frm=JsonConvert.DeserializeObject（json）；
字符串username=frm.username；
}

//您需要定义类

class GenerForm {
    string username {get;set;};
    List<string> roles {get; set;};
    List<string> location {get; set;};
    // and so on
 }

类的一般形式{
字符串用户名{get；set；}；
列出角色{get；set；}；
列表位置{get；set；}；
//等等
}

我正在使用ASP.NET 2.0，因此无法访问Nuget。有没有安装JSON.net的方法？请查看此链接，我认为您需要添加System.Web.Script.Serialization即使在提供的链接中，我也看不到如何访问提交的数据，因为此示例涉及将空对象作为数据发布。在通用HTTP处理程序中，我尝试将提交的数据作为请求参数进行访问：

context.request.Params[“formData”]

，但返回的是空字符串。在

$http

/Javascript端，我使用的是

$http.post（'http://url“，{formData:JSON.stringify（$scope.formData）}）

我可以在Chrome开发者工具中看到请求负载，发送数据的stringify版本。但我无法在服务器端检索到它。由于某种原因，

context.Request.Params[“formData”]

不起作用，但一篇SO帖子导致我使用

string json=new StreamReader（context.Request.InputStream）.ReadToEnd（）

可以工作，但我不太喜欢使用，因为我更愿意通过名称访问提交的请求参数值。