Angular.JS HTTP POST数据未发送

时间:2016-06-24 21:57:30

标签: javascript php angularjs http-post slim

我对Angular.JS开发相当新,但过去曾经使用过PHP,HTML和JS,所以我目前正在构建一个Web应用程序,其中Angular.JS作为前端,PHP Slim作为API后端。我已成功使用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);
        }            
    });

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

请求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

我似乎无法弄清楚为什么我的第一个请求(创建新客户工作)尚未登录无效。任何有关这方面的帮助将非常感激,因为我花时间浏览论坛以寻找其他答案但尚未找到解决此问题的方法。

1 个答案:

答案 0 :(得分:1)

通常,由于以下原因,AJAX请求失败:

  1. 错误的网址或方法
  2. Cors请求
  3. 阻止连接
  4. 由于您已检查DevTools并确保它不是第一个,并且您使用的是同一个域。让我们讨论第三个问题。

    chrome://net-internals/#events可以调试阻止的连接。它出于disconnected networkfirewall issue等原因而发生。第二个有时很混乱,我猜你正面临着这个问题。我想你被AdBlock等插件阻止了。