带有角度的HTTP发布失败

我是angular.js的新手，无法获得简单的POST请求。我正在使用角度版本1.4.8。我的请求永远不会让它到服务器。相反，在提出请求之前，客户端出现错误。我看不到我做错了什么，尽管我已阅读这里的文档：https://docs.angularjs.org/api/ng/service/ $ http＃post。下面是相关的错误信息我已经（产生与下面的代码示例）：带有角度的HTTP发布失败

{ “数据”：空， “状态”：-1， “配置”：{ “方法”：“POST ”， “transformRequest”：[ 空 ]， “transformResponse”：[ 空 ]， “URL”： “http://localhost:4567/foo”， “数据”：{ “foo” 的： “bar” 的 } “headers”：{ “Accept”：“application/json，text/plain，/”， “内容类型”： “应用/ JSON;字符集= UTF-8” } }， “状态文本”： “” }

这是我的代码示例。它重现了Firefox和Chrome的问题，所以这似乎并不是浏览器的怪癖。由于我是一个角色新手，这可能是一些基本的东西（但对我而言并不明显）。帮助赞赏;）

<!DOCTYPE HTML> 
<html lang="en-US"> 

<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
</head> 

<body> 
<script> 
    var app = angular.module('myApp', []); 
    app.controller('customersCtrl', function ($scope, $http) { 

     $scope.httpPost = function (postBody) { 
      var successCallback = function (data, status, headers, config) { 
       alert("post success"); 
      }; 

      var errorCallback = function (data, status, headers, config) { 
       var responseJson = angular.toJson(data); 
       $scope.theError = responseJson; 
      }; 

      $http.post('http://localhost:4567/foo', postBody).then(successCallback, errorCallback); 

     }; 

     var postBody = {"foo" : "bar"}; 
     $scope.httpPost(postBody); 
    }); 
</script> 

<div data-ng-app="myApp" data-ng-controller="customersCtrl"> 
    <pre>{{theError}}</pre> 
</div> 

</body> 
</html>

来源

2016-01-23 thebiggestlebowski

你能提供更多信息客户端错误信息？你是否在回调中获得任何东西？ – devonJS

我将错误转换为json。它列在问题的第二段。 – thebiggestlebowski

我的意思是，你是否打印$ scope.theError？（只要确定，因为它看起来像你）或错误来自哪里？确保它是一个客户端错误，因为你发布的JSON看起来像请求很好/你的代码看起来不错 – devonJS

虽然我不知道你的问题的答案，我可以建议什么对我有用吗？我也是一个角度初学者。另外，请看John Papa's Angular guide以获得更好的代码。

前端

angular 
    .module('app') 
    .config(config); 

function config($routeProvider) { 
    $routeProvider.when('/add-job', { 
     templateUrl: 'templates/add-job.view.html', 
     controller: AddController, 
     controllerAs: 'addCtrl' 
    }); 
}; 

function AddController($http) { 
    var that = this; 

    that.add_new = function (job) { 
     $http.post('api/add_job', that.job).success(function() { 
      //alert("added!"); 
     }); 
    }; 
}

后端 - 超薄框架

require 'vendor/autoload.php'; 

$app = new \Slim\App; 

$app->post('/add_job', 'addJob'); 

function addJob($request) { 
    $job = json_decode($request->getBody()); 
    $sql = "INSERT INTO jobs (title, company, location) VALUES (:title, :company, :location)"; 
    try { 
     $db = getConnection(); 
     $stmt = $db->prepare($sql); 
     $stmt->bindParam("title", $job->title); 
     $stmt->bindParam("company", $job->company); 
     $stmt->bindParam("location", $job->location); 
     $stmt->execute(); 
     $job->id = $db->lastInsertId(); 
     $db = null; 
     echo json_encode($job); 
    } catch(PDOException $e) { 
    echo '{"error":{"text":'. $e->getMessage() .'}}'; 
    } 
}

查看

<form novalidate name="AddNewForm" method="post" action=""> 

    <input type="text" ng-model="addCtrl.job.title" placeholder="Title" /><br/> 
    <input type="text" ng-model="addCtrl.job.company" placeholder="Company" /><br/> 
    <input type="text" ng-model="addCtrl.job.location" placeholder="Location" /><br/> 

    <button ng-click="addCtrl.add_new(job)">Save!</button> 

</form>

来源

2016-01-23 05:05:40 Ivan

嗨伊万，感谢您的快速响应。我很难理解前端代码。你可以把它放到html文档的上下文中，就像我的问题一样。你的回答可能有效;我很新，我不知道如何将它连接到一个工作示例;） – thebiggestlebowski

@ user1483903我添加了HTML视图。看一看。这是调用'$ http.post（'api/add_job'，that.job）''的主要内容'ng-click =“addCtrl.add_new（job）”''。 – Ivan

@ user1483903通过按F12使用Chrome调试器也有帮助。转到网络选项卡并刷新页面。然后点击XHR中的文件，查看您的请求状态。 – Ivan

带有角度的HTTP发布失败

回答

相关问题