Angular AJAX post Issue

Question

I am working on an app in ionic that needs to post user submitted info to a database. I am working with someone who has created a separate php script for this form submission, however each time I try post from the app I am either getting cors issues when not using a proxy or a 404 error when using json afeld...

The PHP looks like this:

<?php

$data = json_decode(file_get_contents("php://input"));
$celeb = $data->celeb;
$camp = $data->camp;
$spirit = $data->spirit;

$sport = $data->sport;
$bizs = $data->bizs;
$entrep = $data->entrep;

$young = $data->young;
$conser = $data->conser;
$saty = $data->saty;

$name = $data->name;
$surname = $data->surname;
$email = $data->email;

$contacts = $data->contacts;

$con = mysql_connect('localhost', 'yarp', 'arpi');
mysql_select_db('yeah', $con);

$qry_em = 'select count(*) as cnt from users where email ="' . $email . '"';
$qry_res = mysql_query($qry_em);
$res = mysql_fetch_assoc($qry_res);

if ($res['cnt'] == 0) {
    $qry = 'INSERT INTO test (celeb,camp,spirit,sport,bizs,entrep,young,conser,saty,name,surname,email,contacts) values ("' . $celeb . '","' . $camp . '",' .$spirit . ','.$sport. ','.$bizs. ','.$entrep. ','.$young. ','.$conser. ','.$saty. ','.$name. ','.$surname. ','.$email. ','.$contacts. ')';
    $qry_res = mysql_query($qry);
    if ($qry_res) {
        $arr = array('msg' => "Submitted Successfully!!!", 'error' => '');
        $jsn = json_encode($arr);
        print_r($jsn);
    } else {
        $arr = array('msg' => "", 'error' => 'Error In Submit');
        $jsn = json_encode($arr);
        print_r($jsn);
    }
} else {
    $arr = array('msg' => "", 'error' => 'A submit has already been cast using this email');
    $jsn = json_encode($arr);
    print_r($jsn);
}


?>

my controller looks like this:

.controller('FrmController', function ($scope , $http) {
                $scope.errors = [];
                $scope.msgs = [];

                $scope.vote = function() {

                    $scope.errors.splice(0, $scope.errors.length);
                    $scope.msgs.splice(0, $scope.msgs.length);

                    $http.post('https://jsonp.afeld.me/?url=http://www.examplesite.com/submit.php', {

                        'celeb'     : $scope.celeb, 
                        'camp'      : $scope.camp, 
                        'spirit'    : $scope.spirit,
                        'sport'     : $scope.sport,
                        'bizs'      : $scope.bizs, 
                        'entrep'    : $scope.entrep, 
                        'young'     : $scope.young,
                        'conser'    : $scope.conser,
                        'saty'      : $scope.saty, 
                        'name'      : $scope.name, 
                        'surname'   : $scope.surname,
                        'email'     : $scope.email,
                        'contacts'  : $scope.contacts

                    }
                    ).success(function(data, status, headers, config) {
                        if (data.msg != '')
                        {

                          console.log(data.msg);
                            $scope.msgs.push(data.msg);
                        }
                        else
                        {
                          console.log(data.error);
                            $scope.errors.push(data.error);
                        }
                    }).error(function(data, status) { 
                        $scope.errors.push(status);
                    });
                }

        })

The submit.php file is definitely at the address so I am not too sure where I am going wrong...

score 1 · Answer 1 · answered Aug 18 '15 at 14:53

so I don't know a lot about php but I am pretty sure you need to enable cors in your php file:

<?php
 header("Access-Control-Allow-Origin: *");

Note: as with all uses of the PHP header function, this must be before any output has been sent from the server.

Nikola · Accepted Answer · 2015-08-19T07:16:44.753

As Jess Paton said, you should use that. However, a better example (from my blog post, linked below) is this:

<?php
 //http://stackoverflow.com/questions/18382740/cors-not-working-php
 if (isset($_SERVER['HTTP_ORIGIN'])) {
        header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
        header('Access-Control-Allow-Credentials: true');
        header('Access-Control-Max-Age: 86400');    // cache for 1 day
    }

    // Access-Control headers are received during OPTIONS requests
    if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {

        if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
            header("Access-Control-Allow-Methods: GET, POST, OPTIONS");         

        if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
            header("Access-Control-Allow-Headers:        {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");

        exit(0);
    }


    //http://stackoverflow.com/questions/15485354/angular-http-post-to-php-and-undefined
    $postdata = file_get_contents("php://input");
 if (isset($postdata)) {
 $request = json_decode($postdata);
 $username = $request->username;

 if ($username != "") {
 echo "Server returns: " . $username;
 }
 else {
 echo "Empty username parameter!";
 }
 }
 else {
 echo "Not called properly with username parameter!";
 }
?>

For more information, and if you're interested, I wrote a step by step tutorial on how to post data from Ionic app to PHP server, along with a Github example and you can see it here: http://www.nikola-breznjak.com/blog/codeproject/posting-data-from-ionic-app-to-php-server/.

Thanx a lot for the comment and link. I seem to be getting through to the PHP code now but I am receiving an error and I am assuming that something on the DB side is stopping the code going through or else my controller is incorrect — letterman549, Aug 19 '15 at 07:42
Sure, no problem. If the answer proved to be helpful, please consider it marking as such. As for your errors, it's always worth checking the server logs for any PHP errors. As for client side you can always check Dev tools (or similar) if you're using Chrome. — Nikola, Aug 19 '15 at 07:45

Angular AJAX post Issue

2 Answers2