使用AngularJS在视图中预先填写并提交表格

Pre fill and submit a form in in a view with AngularJS

本文关键字：提交 表格 AngularJS 视图 使用      更新时间：2023-10-12

我有一个非常简化的AangularJS应用程序。它运行得很好。

现在，我需要填写一些字段，并直接从视图提交表单，而无需用户交互。

这是Javascript代码（再次简化，我删除了许多其他元素）



    mainApp.controller("resultsController",FormController);
    function FormController($scope,APIService) {
        $scope.result ="";
        $scope.search = { keywords: "",
                          result:1,
                          term: "-1",
                          subject: "-1"};
        $scope.searchNow = function() {
            APIService.getTheResults($scope);
        } // $scope.searchNow
    }
    function getResults($http) {
        var results = {};
        url = "...";
        results.searchResults = function() {
            var lurl = url + "a=s";
            return $http( {method: "JSONP", url:lurl} );
        } // results.searchResults
        results.getTheResults = function(scope) {
            var lurl = url;
            $http({
             method: 'POST',
             url:lurl,
             data:jQuery.param(scope.search),
             headers:{'Content-Type':'application/x-www-form-urlencoded'}})
                .success(function(lresponse){
                    var theResponse;
                    theResponse = eval(lresponse);
                    scope.mydata = theResponse.data[0]
                })
                .error( function(data,status) {
                    scope.result = status;
                });
        } // results.getTheResults
        return results;
    } // function getResults($http)
这是HTML视图：


<html lang="en" ng-app="courseCatalog" ng-controller="resultsController">
  <!-- some head info -->
<body>
<form id="search_form" name="search_form" ng-submit="searchNow()">
 <!--
  form fields in here, for example:
 -->
  <input type="text" id="txtkeywords" name="keywords" ng-model="search.keywords">
  <input type="text" id="txtsubject" name="term" ng-model="search.subject">
  <input type="text" id="textterm" name="subject" ng-model="search.term">
  <input id="submit-button" name="submit-button" type="submit"
            value=" Search Now "/>
</form>
<!-- Here is the , I pre-populate some form fields -->
<div id='filter_holder' class='hidden_box'>
 <div class='hidden_box'>{{search.term='1|201601';}}</div>
 <div class='hidden_box'>{{search.subject='6|BIO';}}</div>
</div>
<!-- And here, I try to manually submit the form -->
  <script type="text/javascript">
    document.getElementById('submit-button').click();
  </script>
</body>

但我只能用url中的所有表单字段重新加载页面：
url…/？txtterm＝-1&txtsobject=-1&提交按钮=+搜索+现在+
我也尝试了提交文件形式提交，但我没有得到任何结果。
如果我删除所有预填写/提交并手动填写和发送表格，我会得到正确的结果。
你知道如何从视图中提交表格吗？

尝试使用表单方法post。因此，将您的表单标签更改为：

<form id="search_form" name="search_form" ng-submit="searchNow()" method="post">

如w3schools本章所述，当使用post方法时，数据将不会显示在url中。

"POST提供了更好的安全性，因为提交的数据不可见在页面地址中。"

已解决：我注意到页面试图快速提交表单。首先，我将计时器设置为表单加载后5秒，然后调用提交按钮的点击功能。然后，我只使用了一个window.unload函数来在创建整个DOM时调用：

window.onload = function(){ document.getElementById('submit-button').click(); };

这很好。我希望这能帮助其他人。

谢谢！

相关文章：