title: Jquery ajax syntaxerror json.parse unexpected character at line 1 column 1 of the json data
body: <p>I have this web application that I just use four scripts that is a dynamical.</p>
  
  <p>Brief: </p>
  
  <ul>
  <li>Init.php = Database, </li>
  <li>index.php = webpage, </li>
  <li>api.php = grabs info from server/post info to server, </li>
  <li>drive.js = grabs info from api.php and displays it to index.php or when post, went to api.php</li>
  </ul>
  
  <p>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:</p>
  
  <blockquote>
    <p>json.parse unexpected character at line 1 column 1 of the json data </p>
  </blockquote>
  
  <pre><code>    // 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 +
                      "&lt;br&gt; Last name: " + lastName +
                      "&lt;br&gt; Favorite food: " + food +
                      "&lt;br&gt; Visited : " + stateAbb + " " + stateName +
                      "&lt;br&gt; 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 &lt; len; i++)
                  {
                      var id = data[i]["id"];
                      var firstname = data[i]["firstname"];
                      $("#SelectHumanDropDown").append("&lt;option value='" + id + "'&gt;" + firstname + "&lt;/option&gt;");
                      $("#humanNameDropDown").append("&lt;option value='" + id + "'&gt;" + firstname + "&lt;/option&gt;");
                  }
              },
              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 &lt; len; i++)
                  {
                      var id = data[i]["id"];
                      var stateName = data[i]["statename"];
                      $("#stateNameDropDown").append("&lt;option value='" + id + "'&gt;" + stateName + "&lt;/option&gt;");
                  }
              },
              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());
              }
          });
      }
  </code></pre>
  
  <p>I also have my database which is init.php </p>
  
  <pre><code>        &lt;?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-&gt;query($dropDB) === TRUE){
           echo "Database myDB was successfully dropped \n";
      } else {
          echo "Error dropping database: \n" . $connection-&gt;error;
      }
  
      //Create Database called "myDB"
      $db = "CREATE DATABASE IF NOT EXISTS myDB";
  
      //Check Datebase
      if($connection-&gt;query($db) === TRUE){
          echo "Database created successfully \n";
      } else {
          echo "Error creating database: \n" . $connection-&gt;error;
      }
  
      // Select Database
      $connection-&gt;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-&gt;query($statesTable) === TRUE) 
      {
          echo "States Table created successfully \n";
      }
      else
      {
          echo "States Table wasn't created \n" . $connection-&gt;error;
      }
  
      //Check People Table
      if($connection-&gt;query($peopleTable) === TRUE) 
      {
          echo "People Table created successfully \n";
      }
      else
      {
          echo "People Table wasn't created \n" . $connection-&gt;error;
      }
  
      //Check Visit Table
      if($connection-&gt;query($visitTable) === TRUE) 
      {
          echo "Visit Table created successfully \n";
      }
      else
      {
          echo "Visit Table wasn't created \n" . $connection-&gt;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-&gt;multi_query($insertData) === TRUE)
      {
          $lastID = $connection-&gt;insert_id;
          echo "insertData create successfully. Last inserted ID is: \n" . $lastID;
      }
  
      else
      {
          echo "Error: \n" . $connection-&gt;error;
      }
  
      //Close Connection
      $connection-&gt;close();
      ?&gt;
  </code></pre>
  
  <p>Also, I have my index.php and api.php as links so this page wouldn't be dreadful long. </p>
  
  <p><a href="https://github.com/PaulChu756/statesvisited/blob/master/public/index.php" rel="nofollow noreferrer">index.php</a></p>
  
  <p><a href="https://github.com/PaulChu756/statesvisited/blob/master/public/api.php" rel="nofollow noreferrer">api.php</a></p>