如何使用 JQuery Ajax AngularJs 制作 post req

Question

我正在尝试发帖请求 代码 -

var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.data = {};
            $scope.reqCalling = function () {
                let settings = {
                    "async": true,
                    "crossDomain": true,
                    "url": "myUrl",
                    "method": "POST",
                    "headers": {
                        "content-type": "application/json",
                    },
                    "data": JSON.stringify($scope.data),
                }
                $.ajax(settings).done(function (response) {
                    console.log("Success",response);
                    $scope.data = {};
                    $scope.$apply()
                    return false;
                }).fail(function (error) {
                    console.log("Failed",error);
                    // location.reload();
                });
            }
        });

输入一个字段的代码

 <input type="email" class="form-control" maxlength="255" placeholder="Email..." ng-model="data.email" name="email">

我已经像上面一样创建了五个字段（名字、姓氏、电子邮件、电话、回复），这些是我的输入字段。

发出请求时，我收到 502 状态代码。

当我向邮递员提出请求时，它工作正常...... 我的 api 接受 JSON。来自邮递员，我将身体作为 json 传递

从 Postman 传递过来的正文-

{
        "firstname" : "firstname",
        "lastname" : "lastname",
        "phone" : "0000000000",
        "email" : "abc@pqr.com",
        "response" : "Testing"
    }

我是 AngularJs Ajax 和 JQuery 的新手，我一定在代码中犯了一些错误，请帮助我。

Answer 1

我不确定 502 错误，但如果这个建议有帮助，为什么要使用 jQuery 和 angular？有点违背了目的。它们可以一起使用，但没有任何意义。他们以完全不同的方式做事，并且 Angular 为您可能希望 JQ 做的所有事情提供了解决方案，例如 ajax 调用。这是您的相同代码，角度化（如果您决定最小化脚本，包括注入保护）

var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', '$http', function($scope, $http) {
  $scope.data = {};
  $scope.reqCalling = function() {
    let settings = {
      "url": "myUrl",
      "method": "post",
      "headers": {
        "content-type": "application/json",
      },
      "data": $scope.data // you don't have to stringify the post vars
    }
    $http(settings).then(
      // success!
      function(response) {
        // success data: response.data
      },
      // error
      function(response) {
        if (!angular.isObject(response.data) ||
          !response.data.message) {
          // error: unknown error
        } else {
          // error : response.data.message
        }
      }

    )
  }
}]);