AngularJS - 如何将表单提交给服务器上的控制器?

时间:2022-11-24 20:11:24

The cookbook form examples on the AngularJS site only save the state on the client. How do I submit to the server?

AngularJS站点上的cookbook表单示例仅保存客户端上的状态。我如何提交到服务器?

Alternatively, how do I use jQuery's form.submit() on the form in the ng:click="save()" function?

或者,如何在ng:click =“save()”函数的表单上使用jQuery的form.submit()?

Edit - Found 2 ways to do this ( I also removed the HTML markup I pasted before - just refer to the advanced form cookbook example for the source)

编辑 - 找到2种方法(我还删除了之前粘贴的HTML标记 - 只需参考源代码的高级表格cookbook示例)

  1. http://webpac2.rot13.org:3000/conference/Work (by Dobrica Pavlinusic) to go the AngularJS way using a resource to send the data to the server in JSON format. I had issues with that on the server side - AngularJS was sending it fine but grails were mangling it (according to firebug and request content-length). I need to look into this more. How do I change the content-type in angular for a resource method like $save()?

    http://webpac2.rot13.org:3000/conference/Work(由Dobrica Pavlinusic编写)使用资源以AngsonJS方式将数据以JSON格式发送到服务器。我在服务器端遇到了问题 - AngularJS发送它很好但是grails正在破坏它(根据firebug和请求内容长度)。我需要更多地研究这个问题。如何更改$ save()等资源方法的角度内容类型?

  2. Put a form in and use a submit button. Since I am not doing a single page web app, I used this method. Most validations were on the client and a few more on the server which was sufficient for me.

    将表单放入并使用提交按钮。由于我没有使用单页Web应用程序,因此我使用了此方法。大多数验证都在客户端上,在服务器上还有一些验证对我来说已经足够了。

Just putting this here so that someone else can use this for possible solutions and best approach.

只需将此放在这里,以便其他人可以使用它来获得可能的解决方案和最佳方法。

2 个解决方案

#1


12  

Note, there is strict separation of view (your html template) and logic (your JS code) - mainly because of testability.

注意,视图(您的html模板)和逻辑(您的JS代码)之间存在严格的分离 - 主要是因为可测试性。

The right way is to just send your model to the server, using $resource (for REST) or low level $http. Instead of doing the job in the template.

正确的方法是使用$ resource(用于REST)或低级$ http将模型发送到服务器。而不是在模板中完成工作。

Simple example - HTML template

简单示例 - HTML模板

First: <input type="text" ng-model="person.first" />
Last: <input type="text" ng-model="person.last" />
<button ng:click="save()">Save</button>

JavaScript - controller

JavaScript - 控制器

function FormCntl($scope, $http) {
  $scope.save = function() {
    $http.put('/save.py', $scope.person);
  };
}

#2


0  

As far as I know, there isn't really a good way to modify headers which angular sends to server expect for editing angular source. This is planned enhancement, but it's still not done.

据我所知,没有一种很好的方法可以修改角度发送到服务器所需的编辑角度源的标头。这是计划中的增强,但仍未完成。

I think that angular google group might be better place to ask specific questions like this since developers are really friendly and knowledgeable.

我认为有角度的谷歌小组可能是更好的地方,可以提出这样的具体问题,因为开发人员非常友好和知识渊博。

#1


12  

Note, there is strict separation of view (your html template) and logic (your JS code) - mainly because of testability.

注意,视图(您的html模板)和逻辑(您的JS代码)之间存在严格的分离 - 主要是因为可测试性。

The right way is to just send your model to the server, using $resource (for REST) or low level $http. Instead of doing the job in the template.

正确的方法是使用$ resource(用于REST)或低级$ http将模型发送到服务器。而不是在模板中完成工作。

Simple example - HTML template

简单示例 - HTML模板

First: <input type="text" ng-model="person.first" />
Last: <input type="text" ng-model="person.last" />
<button ng:click="save()">Save</button>

JavaScript - controller

JavaScript - 控制器

function FormCntl($scope, $http) {
  $scope.save = function() {
    $http.put('/save.py', $scope.person);
  };
}

#2


0  

As far as I know, there isn't really a good way to modify headers which angular sends to server expect for editing angular source. This is planned enhancement, but it's still not done.

据我所知,没有一种很好的方法可以修改角度发送到服务器所需的编辑角度源的标头。这是计划中的增强,但仍未完成。

I think that angular google group might be better place to ask specific questions like this since developers are really friendly and knowledgeable.

我认为有角度的谷歌小组可能是更好的地方,可以提出这样的具体问题,因为开发人员非常友好和知识渊博。