【问题标题】:Angular.JS HTTP POST Data Not SendingAngular.JS HTTP POST 数据未发送
【发布时间】:2016-06-24 21:57:30
【问题描述】:

我对 Angular.JS 开发相当陌生,但过去曾使用过 PHP、HTML 和 JS,因此我目前正在构建一个以 Angular.JS 作为前端、PHP Slim 作为 API 后端的 Web 应用程序。我已经成功地使用 Angular.JS $http.post 为我的一个调用实现了基于令牌的身份验证,但似乎无法在另一个不需要令牌身份验证的 $http.post 请求中获得所需的结果。

请求 1 - Angular.JS(工作):

  function ($scope, $http, $location) {
  console.log("REACHED");

  $scope.master = {};
  $scope.activePath = null;

  $scope.New_Customer = function(customer, AddNewForm) {
      console.log(customer);
      console.log("2: " + JSON.stringify(customer));

      console.log("SCOPE: " + customer.status);

      $http({
        method: "post",
        url: "v1/customers",
        headers: {
            'authorization': token,
            'Content-Type': 'application/x-www-form-urlencoded'
            },
        data: $.param({first_name: customer.first_name, last_name: customer.last_name, email: customer.email, mobile_number: customer.mobile_number, home_number: customer.home_number, address_line1: customer.address_line1, address_line2: customer.address_line2, city: customer.city, postalcode: customer.postalcode, 'status': customer.status})
        }).success(function(result){
          console.log(result);
          $scope.reset();
          $scope.activePath = $location.path('#/Customers');
        });

      $scope.reset = function() {
          $scope.customer = angular.copy($scope.master);
      };

      $scope.reset();
  };
}

PHP(工作)

$app->post('/customers', 'authenticate', function() use ($app) {
        // check for required params
        verifyRequiredParams(array('first_name'));

        $response = array();
        $first_name = $app->request->post('first_name');
        $last_name = $app->request->post('last_name');
        $email = $app->request->post('email');
        $mobile_number = $app->request->post('mobile_number');
        $home_number = $app->request->post('home_number');
        $address_line1 = $app->request->post('address_line1');
        $address_line2 = $app->request->post('address_line2');
        $city = $app->request->post('city');
        $postalcode = $app->request->post('postalcode');

        global $user_id;
        $db = new DbHandler();

        // creating new customer
        $customer_id = $db->createCustomer($user_id, $first_name, $last_name, $email, $mobile_number, $home_number, $address_line1, $address_line2, $city, $postalcode);

        if ($customer_id != NULL) {
            $response["error"] = false;
            $response["message"] = "Customer created successfully";
            $response["customer_id"] = $customer_id;
            echoRespnse(201, $response);
        } else {
            $response["error"] = true;
            $response["message"] = "Failed to create customer. Please try again";
            echoRespnse(200, $response);
        }            
    });

但是,对于我的登录脚本,数据似乎没有到达 $http.post 请求在控制台中始终返回“null”的 PHP 文件。

请求 2 - Angular.JS(不工作)

  function ($scope, $http, $location) {
  console.log("REACHED");

  $scope.Login = function(customer, LoginForm) {
      console.log(customer);
      console.log("2: " + JSON.stringify(customer));

      console.log("SCOPE: " + customer.email);

  $http({
    url: "v1/login",
    method: "POST",
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    data: $.param({email: customer.email, password: customer.password})
}).success(function(data, status, headers, config) {
    $scope.data = data;
    console.log($scope.data);
}).error(function(data, status, headers, config) {
    $scope.status = status;
    $scope.data = data;
    console.log($scope.status + " " + $scope.data);
});  
  };
}

PHP(不工作)

$app->post('/login', function() use ($app) {

        // check for required params
        verifyRequiredParams(array('email', 'password'));

        $response = array();
        $email = $app->request()->post('email');
        $password = $app->request()->post('password');

        $db = new DbHandler();
        // check for correct email and password
        if ($db->checkLogin($email, $password)) {
            // get the user by email
            $user = $db->getUserByEmail($email);

            if ($user != NULL) {
                $response["error"] = false;
                $response['name'] = $user['name'];
                $response['email'] = $user['email'];
                $response['apiKey'] = $user['api_key'];
                $response['createdAt'] = $user['created_at'];
            } else {
                // unknown error occurred
                $response['error'] = true;
                $response['message'] = "An error occurred. Please try again";
            }
        } else {
            // user credentials are wrong
            $response['error'] = true;
            $response['message'] = 'Login failed. Incorrect credentials';
        }

        echoRespnse(200, $response);
    });

控制台日志:

app.js:148 REACHED
app.js:148 REACHED
/contacts_app_2/#/Login:1 POST http://localhost/contacts_app_2/ 412 (Precondition Failed)
Navigated to http://localhost/contacts_app_2/
app.js:148 REACHED
app.js:148 REACHED
app.js:151 Object {email: "test@test.com", password: "testpassword123"}
app.js:152 2: {"email":"test@test.com","password":"testpassword123"}
app.js:154 SCOPE: test@test.com
app.js:167 0 null
Navigated to http://localhost/contacts_app_2/
app.js:148 REACHED
app.js:148 REACHED

我似乎无法弄清楚为什么我的第一个请求(创建新客户有效)尚未登录。对此的任何帮助将不胜感激,因为我已经花时间在论坛中寻找其他答案,但尚未找到解决此问题的方法。

【问题讨论】:

  • 为什么不在echoRespnse(200, $response);之前打印一些日志。
  • 我在整个 PHP 函数中添加了一些 PHP 回显,但它们似乎都没有在控制台中被调用
  • 我想这是问题或你的路线。尝试通过任何工具发出请求,例如 Chrome 中的 Advanced REST Client,以测试 url 是否有效。
  • 我不觉得这是 AngularJS 代码的问题。在浏览器的开发者工具中查看网络日志。
  • 我的建议是,点击那个错误行,它会显示请求的详细信息、url、header、参数以及可能的错误原因。

标签: javascript php angularjs http-post slim


【解决方案1】:

通常,AJAX 请求失败的原因如下:

  1. 错误的网址或方法
  2. Cors 请求
  3. 连接被阻止

既然您已经检查了DevTools 并确保它不是第一个,并且您使用的是同一个域。让我们讨论第三个。

阻塞的连接可以通过chrome://net-internals/#events进行调试。它发生的原因有disconnected networkfirewall issue。第二个有时非常令人困惑,我猜你正面临着。我想你被你的插件屏蔽了,比如AdBlock

【讨论】:

  • 感谢您提供该信息,但我禁用了 adblock 并查看了我看不到任何异常的事件。相反,我继续尝试在 IE、Firefox 和 Edge 中做同样的事情——所有这些都没有代码问题,所以(正如你所说)Chrome 中的某些东西阻止了这一点。
猜你喜欢
  • 2020-04-12
  • 2011-11-04
  • 1970-01-01
  • 2017-03-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-11-14
相关资源
最近更新 更多