I have this web application that I just use four scripts that is a dynamical.
Brief:
- Init.php = Database,
- index.php = webpage,
- api.php = grabs info from server/post info to server,
- drive.js = grabs info from api.php and displays it to index.php or when post, went to api.php
So I'm just trying to add a person through post method by jquery ajax. But I have this syntaxerror in my code, which mainly goes to my drive.file of addPerson function:
json.parse unexpected character at line 1 column 1 of the json data
// populate people/states, also person/visit form submit
$(document).ready(function(){
populatePeople();
populateStates();
displayData();
$('#addPersonSubmit').click(function(e){
e.preventDefault();
addPerson();
});
$('#addVisitSubmit').click(function(e){
e.preventDefault();
addVisit();
});
});
//display selected person
function displayData()
{
$("#SelectHumanDropDown").change(function(){
$.ajax({
type: "GET",
url: "api/visits",
dataType: "json",
success: function(data)
{
var i = $("#SelectHumanDropDown").val();
$("#displayInfo").empty();
var firstName = data[i]["firstname"];
var lastName = data[i]["lastname"];
var food = data[i]["food"];
var stateAbb = data[i]["stateabb"];
var stateName = data[i]["statename"];
var dateVisit = data[i]["date_visited"];
$("#displayInfo").append(
"First name: " + firstName +
"<br> Last name: " + lastName +
"<br> Favorite food: " + food +
"<br> Visited : " + stateAbb + " " + stateName +
"<br> on " + dateVisit);
}
});
});
}
//populate people's dropdowns
function populatePeople()
{
$.ajax({
type:"GET",
url:"api/people",
dataType:"json",
success : function(data)
{
//console.log('success');
//console.log(data);
$("#SelectHumanDropDown").empty();
$("#humanNameDropDown").empty();
var len = data.length;
for(var i = 0; i < len; i++)
{
var id = data[i]["id"];
var firstname = data[i]["firstname"];
$("#SelectHumanDropDown").append("<option value='" + id + "'>" + firstname + "</option>");
$("#humanNameDropDown").append("<option value='" + id + "'>" + firstname + "</option>");
}
},
error : function(data)
{
console.log('failed');
console.log(data);
}
});
}
//populate state dropdown
function populateStates()
{
$.ajax({
type:"GET",
url:"api/states",
dataType:"json",
success : function(data)
{
//console.log('success');
//console.log(data);
$("#stateNameDropDown").empty();
var len = data.length;
for(var i = 0; i < len; i++)
{
var id = data[i]["id"];
var stateName = data[i]["statename"];
$("#stateNameDropDown").append("<option value='" + id + "'>" + stateName + "</option>");
}
},
error : function(data)
{
console.log('failed');
console.log(data);
}
});
}
//Add person to database
function addPerson()
{
$.ajax({
type: "POST",
url: "api/people", // api/people
data: $("#personForm").serialize(),
success: function(data,status,xhr)
{
console.log(data);
console.log(status);
console.log(xhr);
console.log($("#personForm").serialize());
console.log("You have added a person");
populatePeople();
displayData();
},
error: function(data,status,xhr)
{
console.log(data);
console.log(status);
console.log(xhr);
console.log($("#personForm").serialize());
console.log("error");
//populatePeople();
//displayData();
}
});
}
//Add visit to database
function addVisit()
{
$.ajax({
type: "POST",
url: "api/visits", // api/visits
data: $("#humanNameDropDown, #stateNameDropDown, #visitForm").serialize(),
success: function(data)
{
console.log(data);
console.log($("#visitForm").serialize());
console.log("You have added a visit");
},
error: function(data)
{
console.log(data);
console.log($("#visitForm").serialize());
}
});
}
I also have my database which is init.php
<?php
// Define variables.
$host = "localhost";
$user = "root";
$password = "root";
$database = "myDB";
//Create connection
$connection = mysqli_connect($host, $user, $password);
// Check connection
if(!$connection){
die("Could not connect: " . mysqli_connect_error());}
else{
echo "Connection successfully \n";
}
// Drop database
$dropDB = "DROP DATABASE myDB";
// Check drop database
if($connection->query($dropDB) === TRUE){
echo "Database myDB was successfully dropped \n";
} else {
echo "Error dropping database: \n" . $connection->error;
}
//Create Database called "myDB"
$db = "CREATE DATABASE IF NOT EXISTS myDB";
//Check Datebase
if($connection->query($db) === TRUE){
echo "Database created successfully \n";
} else {
echo "Error creating database: \n" . $connection->error;
}
// Select Database
$connection->select_db($database);
//Create States Table
$statesTable = "CREATE TABLE IF NOT EXISTS States
(
id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
stateabb varchar(2) NOT NULL,
statename varchar(40) NOT NULL
)";
// Create People Table
$peopleTable = "CREATE TABLE IF NOT EXISTS People
(
id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
firstname varchar(40) NOT NULL,
lastname varchar(40) NOT NULL,
food varchar(40) NOT NULL
)";
// Create Visit Table
$visitTable = "CREATE TABLE IF NOT EXISTS Visits
(
id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
p_id INT(40) NOT NULL,
s_id INT(40) NOT NULL,
FOREIGN KEY (p_id) REFERENCES People(id),
FOREIGN KEY (s_id) REFERENCES States(id),
date_visited varchar(40) NOT NULL
)";
//Check States Table
if($connection->query($statesTable) === TRUE)
{
echo "States Table created successfully \n";
}
else
{
echo "States Table wasn't created \n" . $connection->error;
}
//Check People Table
if($connection->query($peopleTable) === TRUE)
{
echo "People Table created successfully \n";
}
else
{
echo "People Table wasn't created \n" . $connection->error;
}
//Check Visit Table
if($connection->query($visitTable) === TRUE)
{
echo "Visit Table created successfully \n";
}
else
{
echo "Visit Table wasn't created \n" . $connection->error;
}
// Insert data into states table
$insertData = " INSERT INTO States (stateabb, statename)
VALUES ('LA', 'Louisiana');";
$insertData .= "INSERT INTO States (stateabb, statename)
VALUES ('FL', 'Florida');";
$insertData .= "INSERT INTO States (stateabb, statename)
VALUES ('TX', 'Texas');";
$insertData .= "INSERT INTO States (stateabb, statename)
VALUES ('NM', 'New Mexico');";
$insertData .= "INSERT INTO States (stateabb, statename)
VALUES ('ID', 'Idaho');";
$insertData .= "INSERT INTO States (stateabb, statename)
VALUES ('IA', 'Iowa');";
$insertData .= "INSERT INTO States (stateabb, statename)
VALUES ('ME', 'Maine');";
$insertData .= "INSERT INTO States (stateabb, statename)
VALUES ('NV', 'Nevada');";
$insertData .= "INSERT INTO States (stateabb, statename)
VALUES ('NY', 'New York');";
$insertData .= "INSERT INTO States (stateabb, statename)
VALUES ('UT', 'Utah');";
// Insert data into people table
$insertData .= "INSERT INTO People (firstname, lastname, food)
VALUES ('Paul', 'Chu', 'Rice');";
$insertData .= "INSERT INTO People (firstname, lastname, food)
VALUES ('Chui', 'Chu', 'Steak');";
$insertData .= "INSERT INTO People (firstname, lastname, food)
VALUES ('Pandalord', 'Chu', 'Cookies');";
$insertData .= "INSERT INTO People (firstname, lastname, food)
VALUES ('LordBabyPanda', 'Chu', 'Milk');";
// Insert data into Visits table
$insertData .= "INSERT INTO Visits (p_id, s_id, date_visited)
VALUES ('1', '1', '1994/07/14');";
$insertData .= "INSERT INTO Visits (p_id, s_id, date_visited)
VALUES ('1', '2', '1994/07/14');";
$insertData .= "INSERT INTO Visits (p_id, s_id, date_visited)
VALUES ('2', '10', '1994/07/14');";
$insertData .= "INSERT INTO Visits (p_id, s_id, date_visited)
VALUES ('3', '9', '1994/07/14');";
$insertData .= "INSERT INTO Visits (p_id, s_id, date_visited)
VALUES ('4', '7', '1994/07/14');";
// Check stateData in table
if($connection->multi_query($insertData) === TRUE)
{
$lastID = $connection->insert_id;
echo "insertData create successfully. Last inserted ID is: \n" . $lastID;
}
else
{
echo "Error: \n" . $connection->error;
}
//Close Connection
$connection->close();
?>
Also, I have my index.php and api.php as links so this page wouldn't be dreadful long.
