用来自rails api的表单提交的新数据重新填充Angular应用的数据

Repopulate Angular app data with new data from form submission from a rails api

本文关键字：数据 新填充 填充 Angular 应用 表单提交 新数据 rails api      更新时间：2023-09-26

我有一个rails api，它向Angular应用发送默认输入。Angular应用在localhost:9000/api/query处接收json，然后在localhost:9000/#/query处的视图将json样式化成一个无序列表。

如果我发送一个POST请求(从浏览器javascript调试器)到Rails应用程序，并且可以发送自定义输入并获得所需的输出作为json字符串。

$.get('http://rails-app-url:3000/api/query', { 'input': 'my input goes here}

我决定做的是建立一个带有输入框的表单，并给它一个ng-submit函数来运行javascript post请求

<form ng-submit="sub()">
  <textarea name="my_input"></textarea>
  <button id="execute"></button>
</form>

其中sub()函数在jquery脚本中定义，该脚本将查询变量设置为所需的json

$('#execute').click(function() {
  queries = $.get('http://url-to-rails-app:3000/api/query', { 'input': 'my input here' });
});

显示查询，我使用如下标记

<div ng-controller="QueryCtrl">
  <ul ng-repeat="query in queries">
    <li>{{query}}</li>
  </ul>
</div>

这里有两个问题:

  1. 脚本不会执行，除非它与该特定选项卡视图的html内联编写。我不能把它附加到index.html，因为它找不到#execute按钮

  2. 即使脚本与html内联编写，请求也会发送到服务器，但服务器的响应不会反映在html中。

use ng-click

$scope.onSubmit = function() {
  queries = $http.get('http://url-to-rails-app:3000/api/query', { 'input': 'my input here' });
};
<form ng-submit="onSubmit()">
  <textarea name="my_input"></textarea>
  <input type="submit"/>
</form>

编辑

按注释

<form ng-submit="onSubmit()">
  <textarea name="my_input"></textarea>
  <button type="submit" ng-click="onSubmit()"/>
</form>

你可以这样做(并使用AngularJS中的$http)

<form>
  <textarea ng-model="my_input" name="my_input"></textarea>
  <button id="execute" ng-click="sub()">Execute</button>
</form>

在控制器中:

$scope.sub = function(){
    $http.get('http://url-to-rails-app:3000/api/query', {'input':$scope.my_input}).success(function(data){
       $scope.queries = data;
    }
}

我假设你的表单和你的显示列表在同一个控制器(共享相同的$作用域)。你为什么要使用GET，我认为POST请求在这种情况下应该更好。

相关文章：