【问题标题】:Angular form not submitting via postAngular表单未通过帖子提交
【发布时间】:2016-11-13 14:49:48
【问题描述】:

请检查为什么这个 Angular 代码不通过 post 提交 url。我正在尝试通过短信发送我的表单详细信息,以通过手机发布请求。

<div id="page7-container1" ng-app="amApp">
      <h4 id="page7-heading1" style="color:#000000;">App</h4>
      <div id="page7-markdown3" class="show-list-numbers-and-dots">
      </div>
      <div id="page7-markdown6" class="show-list-numbers-and-dots">
      </div>
      <div id="page7-markdown5" class="show-list-numbers-and-dots">
      </div>
      <div id="page7-markdown4" class="show-list-numbers-and-dots">
      </div>
      <h3 id="page7-heading4" style="color:#337AE2;font-weight:600;">Request a call back</h3>
      <form id="page7-form2" class="list" ng-controller="formCtrl" ng-submit="submitForm()">
        <label class="item item-input item-floating-label" id="page7-input0">
          <input type="text" name="formAdata.rname" required placeholder="Enter Your Name">
        </label>
        <label class="item item-input item-floating-label" id="page7-input1">
          <input type="number" name="formAdata.rmobile" required placeholder="Enter Mobile Number">
        </label>
        <label class="item item-input item-floating-label" id="page7-input2">
          <input type="text" name="formAdata.rlocation" required placeholder="Enter Your location/district/state?">
        </label>
        <input id="page7-button12" type="submit" ngClick="Submit" class="button button-positive  button-block" value="Request call back!">
      </form>
        <script language="javascript">
            var messager = '';
            var app = angular.module('amApp', []);
            app.controller('formCtrl', function ($scope, $http) {
                $scope.submitForm = function() {
                    messager = "http://amritamultimedia.co.in/sms/sendsms.php?uid=9947009540&pwd=A3228B&msg=I am "+$scope.formAdata.rName+" from "+$scope.formAdata.rLocation+". My mobile number is: "+$scope.formAdata.rMobile+", I would like to get more info about Courses. Requested call back from your Mobile App, Please call me to my mobile.";
                    $http({
                        url: messager,
                        method: "POST",
                        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                        data: $.param($scope.formAdata)
                    }).success(function(data, status, headers, config) {
                        document.getElementById("page7-form2").innerHTML = "We will get back to you within 3-4 hours. Thanks for checking our app.";
                    }).error(function(data, status, headers, config) {

                    });
                };
            });
        </script>
    </div>

必须缺少什么,或者做错了什么?

请帮忙!

谢谢, sj

【问题讨论】:

  • 在提交按钮上使用ngClick="submitForm()" 而不是ngClick="Submit()"

标签: javascript angularjs asynchronous http-post


【解决方案1】:

将此添加到您的控制器

$scope.formAdata={};

您使用 json 参数,因此您的 formAdata 没有正确绑定。

还要检查您是否使用 POST 传递数据,如 查询字符串,因此需要绑定并作为 json 对象发送或使用 GET 方法。

由于没有提及数据类型,所以还要仔细检查 messenger 的值是否被分配

var app = angular.module('amApp', []);
app.controller('formCtrl', function ($scope, $http) {
    $scope.formAdata={};
    var messager = "";
    $scope.submitForm = function() {
        messager = "http://amritamultimedia.co.in/sms/sendsms.php;
        var userData={
        "uid":mobilenumber,
        "pwd":password,
        "phone":$scope.formAdata.phone,
        "msg": $scope.formAdata.message
        }
        $http({
            url: messager,
            method: "POST",
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            data: userData,
        }).success(function(data, status, headers, config) {
            document.getElementById("page7-form2").innerHTML = "We will get back to you within 3-4 hours. Thanks for checking our app.";
        }).error(function(data, status, headers, config) {

        });
    };
});

这会起作用。

【讨论】:

  • 让我检查一下...会尽快回复您。谢谢 Aravind
  • 您的代码似乎没问题,但在当前情况下不起作用。现在让我解释一下我想要得到什么......我正在使用 github 插件与 way2sms 连接以发送短信以获取客户端请求到移动设备。当 url 在浏览器 url 中给出并提交时,它工作正常。但是是否可以在提交表单时通过角度发布方法来做到这一点......?希望你得到真正的问题....从浏览器 url 提交时,以下 url 工作正常,它试图从 angular 提交中使用...amritamultimedia.co.in/sms/…
  • 我正在尝试使用它构建一个应用程序......我不确定我该如何调试错误。我正在使用 ionic 框架和 phonegap 来构建应用程序。
  • 你可以使用团队查看器吗??
  • 我可以为这个页面发布离子模板...?没事吧?
猜你喜欢
  • 1970-01-01
  • 2019-10-09
  • 1970-01-01
  • 2016-04-04
  • 2018-08-18
  • 2020-07-04
  • 2015-06-28
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多