I am doing it in angular js and this is kind of exersice but i am stuck. I am new to angularjs. What i am doing is sending the post and get to the same php page and use a switch to execute the appropriate code. But when i execute it i get the error:
angular.js:12520 SyntaxError: Unexpected token < in JSON at position 0
I have 2 questions,
1. Why am i getting this error? What did i do wrong
2. I have turned error reporting on and yet i dont get any errors. Why?
Forgive me if u see something stupid in my code and help me make it better.
AngDemo.html:
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<style type="text/css">
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body ng-app="demoFile">
<div ng-controller="frmCntrl" ng-init="showTable=false">
<form>
<p> First Name:  <input type="text" ng-model="fnameAng" /> </p>
<p> Last Name:  <input type="text" ng-model="lnameAng" /> </p>
<p> Age:      <input type="number" ng-model="ageAng" /> </p>
<p> Department:
  <select ng-model="deptAng">
<option value="">
<option value="software">Software
<option value="hr">HR
<option value="tele-marketing">Tele-Marketing
<option value="database">Database
</select>
</p>
<input type="submit" value="Submit" data-ng-click="insertData()" />
<input type="reset" value="Reset" data-ng-click="resetData()" />
</form><br>
<table>
<thead ng-show="showTable">
<th>First name</th>
<th>Last name</th>
<th>Age</th>
<th>Department</th>
<thead>
<tbody>
<tr ng-repeat="x in names">
<td>{{x.fname}}</td>
<td>{{x.lname}}</td>
<td>{{x.age}}</td>
<td>{{x.dept}}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
var app= angular.module('demoFile', []);
app.controller('frmCntrl',function($scope,$http){
$scope.insertData=function(){
$http.post("addData.php",{
'fnameAng':$scope.fnameAng,
'lnameAng':$scope.lnameAng,
'ageAng':$scope.ageAng,
'deptAng':$scope.deptAng,
}).then(function(response){
console.log("response.data");});
$scope.showTable=true;
$http.get("addData.php")
.then(function(response){
$scope.names=response.data.records;});
};
$scope.resetData=function(){
$scope.fnameAng="";
$scope.lnameAng="";
$scope.ageAng="";
$scope.deptAng="";
}
});
/*
app.controller('tableCntrl',function($scope,$http){
$http.get("select.php")
.then(function(response){
$scope.names=response.data.records;
})
});*/
</script>
</html>
addData.php:
<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
ini_set('display_startup_errors',1);
ini_set('display_errors',1);
error_reporting(-1); //Initializing error reporting
$uname="root";//initialzing and connecting to database
$pass="";
$dname="phptut";
mysql_connect("localhost", $uname, $pass);
@mysql_select_db($dname) or die("Cannot open Database");
$method=$_SERVER['REQUEST_METHOD'];//determining the type of request
switch($method)
{
case 'POST':{
echo $method;
$data=json_decode(file_get_contents("php://input"));
$fname=$data->fnameAng;
$lname=$data->lnameAng;
$age=$data->ageAng;
$dept=$data->deptAng;
$result = mysql_query("INSERT INTO anginfo (fname, lname, age, dept) VALUES ('$fname','$lname',$age,'$dept')");
break;
}
case 'GET': {
$result = mysql_query("SELECT fname, lname, age, dept from anginfo");//executing query
$output=array();//converting the result object to json
while($r = mysql_fetch_assoc($result))
{
$output[] = $r;
}
$json=json_encode($output);
$json='{"records":'.$json.'}';
echo($json);
}
}
mysql_free_result($result);
mysql_close();
?>
For your first question, it sounds like your are not giving json to the client. I don't speak PHP, so I am not sure. In your PHP file, it looks like you haven't defined a POST handler in your switch statement. Based on the fact that it says that the first character in the response is a <, I am guessing that the response is HTML. If I were to try and confirm this, I would look in the network tab in Chrome devtools to see what the server responded with.
For your second question... the .then call on your $http.post takes two callbacks. The first is the success handler, which you have provided. The second is the error handler, which you haven't provided. You could try adding the error handler to see if that logs any errors. It should help you confirm the first question... which is that your php is returning HTML and not JSON. Here is what that would look like:
$http.post(function(){
//your code
}).then(successFunction, errorFunction);