如何使 post req 使用 JQuery Ajax AngularJs

Question

我正在尝试发出 post 请求代码-

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">

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

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

当我向 Postman 发出请求时，它工作正常... 我的 api 正在接受 JSON。来自 postman 我将 body 作为 json

body 从 Postman 传来-

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

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

Answer 1

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

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
        }
      }

    )
  }
}]);

如何使 post req 使用 JQuery Ajax AngularJs

How make post req using JQuery Ajax AngularJs

javascript

ajax

jquery

angularjs