Return JSON data from PHP script using AJAX jQuery

Question

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.

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.

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.

myform.html

<html>
<head>
<title>Computer swap form</title>
</head>
<body>
<form method = "post" action = "test.php" id="computerForm">
Serial Number: <br>
<input name="serialnumber" type="text">

<button id = "sub"> Submit </button>
</form>
<!--display the response returned after form submit -->
<span id ="result"></span>

<script type="text/javascript" src = "https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script src="my_script.js" type="text/javascript"></script>

</body>
</html>

my_script.js

$("#computerForm").submit(function(e) {
  e.preventDefault();
  $.post(this.action, $(this).serialize(), function(info) {
    $("#result").html(info);
  });
});

process.php

<?php

include('./Airtable.php');
include('./Request.php');
include('./Response.php');

use \TANIOS\Airtable\Airtable;
$airtable = new Airtable(array(
    'api_key' => '***',
    'base'    => '***'
));
  //$sn = $_POST['serialnumber'];
    $sn = "a_serial_number"; //manual setting this produces correct info
  $params =  [
   "filterByFormula"=>"AND({S/N} = '$sn')"
];
$request  = $airtable->getContent('Computers', $params);
$response = $request->getResponse();
$data     = $response['records'];

echo json_encode($data); 
?>

test.php

<?php

$sn = $_POST['serialnumber'];

if(!isset($sn))
{
    echo "error serial number not set";
}
else {
    echo "$sn successfully saved";
}
?>

You can use JSON.parse() to parse out your info from the JSON string and use it as an object or an array. — Ryan Wilson
– Ryan Wilson, Commented Jun 12, 2018 at 19:13
What do you mean by adjusting it? How to display the information? — Jordan Soltman
– Jordan Soltman, Commented Jun 12, 2018 at 19:13
It's not clear to me how test.php and process.php are related. Your ajax call is calling test.php, which is not doing anything with process.php — Taplar
– Taplar, Commented Jun 12, 2018 at 19:14
@JordanS He means what does he need to change when he sends the AJAX request to process.php instead of test.php. — Barmar
– Barmar, Commented Jun 12, 2018 at 19:14
@Taplar They're not related. He's evolving the code. He used test.php for a simple test, now he wants to change to process.php to get the real data from the API. — Barmar
– Barmar, Commented Jun 12, 2018 at 19:15

Barmar · Accepted Answer · 2018-06-12 19:20:32Z

2

You can give a "json" argument to $.post to tell it that the response is JSON, and it will automatically parse the response to a Javascript object or array. In my sample code below I'm assuming it's an array, and each element is an object that contains a property that you want to show in the result; replace .someProperty with the actual property.

$("#computerForm").submit(function(e) {
  e.preventDefault();
  $.post(this.action, $(this).serialize(), function(info) {
    var html = "";
    $.each(info, function() {
        html += this.someProperty + "<br>";
    });
    $("#result").html(html);
  }, "json");
});

process.php can use $_POST['serialnumber'] when it's calling the Airtable API.

$sn = $_POST['serialnumber'];

answered Jun 12, 2018 at 19:20

Barmar

787k57 gold badges552 silver badges664 bronze badges

This worked for me! If you don't mind I have a followup question. The JSON return is set up as such: [{"id":"xxx","fields":{"Name":"xxx",,"Location":"xxx","Model":"xxx",""S\/N":"xxx"},"createdTime":"xxxxx"}] when replacing this.someProperty with this.id, the correct id is shown but I'm not sure how to display information within fields. I figured it was another dot operator such as this.fields.name but this did not work

Patrick Lown
– Patrick Lown

06/12/2018 19:43:49
Commented Jun 12, 2018 at 19:43
Nvm, it is the dot operator. Thanks for you answer, Barmar!

Patrick Lown
– Patrick Lown

06/12/2018 20:01:22
Commented Jun 12, 2018 at 20:01
Close, it's this.fields.Name

Barmar
– Barmar

06/12/2018 20:03:55
Commented Jun 12, 2018 at 20:03

Add a comment |

Collectives™ on Stack Overflow

Return JSON data from PHP script using AJAX jQuery

1 Answer 1

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related