如何使用 JQuery Ajax AngularJs 制作 post req

Posted 2023-05-09

【中文标题】如何使用 JQuery Ajax AngularJs 制作 post req

【英文标题】：How make post req using JQuery Ajax AngularJs

【发布时间】：2021-08-31 23:39:22

【问题描述】：

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

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" : "[e-mail]",
        "response" : "Testing"
    

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

【参考方案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
        
      

    )
  
]);

【讨论】：

非常感谢您的帮助。我有一个疑问，我真的不需要对 post var 进行字符串化吗？其次是我将 Ajax JQ 与 angularjs 一起使用，因为在我的公司中他们只是像这个 idk 那样做，但是......这就是我尝试相同的原因。

好吧，您可能能够对帖子变量进行字符串化，但您不需要，而我从不这样做。看到这个页面：docs.angularjs.org/api/ng/service/$http

非常感谢您的帮助