title: Return JSON data from PHP script using AJAX jQuery
body: <p>Goal of Project: User enters in the serial number of a computer, the number is checked and if it matches a computer in our Airtable base, we add some information to it and create a new entry for it in a different tab.  </p>
  
  <p>My experience: I have lots of experience in Java, C, data structures and algorithms from University.  Before starting this project, I had zero experience in web development and have thus far attained basic knowledge of html, php, css, and js.  </p>
  
  <p>What I need help with: My current mini goal for the project is to have the user enter a serial number and have the computer information displayed on the same page.  I have my files shown below.  My process.php accurately retrieves the computer information given a serial number and converts it to a JSON object.  My my_script.js is what I used with my test.php to practice displaying the user input without redirection or page refresh.  My myform.html I believe is pretty self explanatory, just a form to take in a serial number.  I understand how my code in my_script.js works but need help adjusting it to handle JSON return.  Any help, resources or overall ideas about the project will be greatly appreciated.</p>
  
  <p>myform.html</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Computer swap form&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form method = "post" action = "test.php" id="computerForm"&gt;
  Serial Number: &lt;br&gt;
  &lt;input name="serialnumber" type="text"&gt;
  
  &lt;button id = "sub"&gt; Submit &lt;/button&gt;
  &lt;/form&gt;
  &lt;!--display the response returned after form submit --&gt;
  &lt;span id ="result"&gt;&lt;/span&gt;
  
  &lt;script type="text/javascript" src = "https://code.jquery.com/jquery-3.3.1.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="my_script.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>my_script.js</p>
  
  <pre><code>$("#computerForm").submit(function(e) {
    e.preventDefault();
    $.post(this.action, $(this).serialize(), function(info) {
      $("#result").html(info);
    });
  });
  </code></pre>
  
  <p>process.php</p>
  
  <pre><code>&lt;?php
  
  include('./Airtable.php');
  include('./Request.php');
  include('./Response.php');
  
  use \TANIOS\Airtable\Airtable;
  $airtable = new Airtable(array(
      'api_key' =&gt; '***',
      'base'    =&gt; '***'
  ));
    //$sn = $_POST['serialnumber'];
      $sn = "a_serial_number"; //manual setting this produces correct info
    $params =  [
     "filterByFormula"=&gt;"AND({S/N} = '$sn')"
  ];
  $request  = $airtable-&gt;getContent('Computers', $params);
  $response = $request-&gt;getResponse();
  $data     = $response['records'];
  
  echo json_encode($data); 
  ?&gt;
  </code></pre>
  
  <p>test.php</p>
  
  <pre><code>&lt;?php
  
  $sn = $_POST['serialnumber'];
  
  if(!isset($sn))
  {
      echo "error serial number not set";
  }
  else {
      echo "$sn successfully saved";
  }
  ?&gt;
  </code></pre>