Question

我有这个非常简化的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视图：

    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)

但是我只能通过网址中的所有表单字段重新加载页面：

... URL ... / txtterm = -1＆安培; txtsubject = -1＆安培;提交按钮= +搜索+现在+

我还尝试使用document-form-submit提交但没有结果。

如果我删除所有预填/提交并手动填写并发送表格，我会得到正确的结果。

如何从视图中提交表单？

Answer 1

尝试使用form method post。因此，请将表单标记更改为：

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

正如w3schools的this章所述，使用post方法时，数据不会显示在网址中。

＆＃34; POST提供更好的安全性，因为提交的数据不可见在页面地址。＆＃34;

Answer 2

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

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

这很好用。我希望这有助于其他人。

谢谢！

使用AngularJS在视图中预填并提交表单

2 个答案: