Возврат данных JSON из сценария PHP с использованием AJAX jQuery - PullRequest
0 голосов
/ 12 июня 2018

Цель проекта: пользователь вводит серийный номер компьютера, номер проверяется, и если он соответствует компьютеру в нашей базе Airtable, мы добавляем к нему некоторую информацию и создаем новую запись для него на другой вкладке.

Мой опыт: у меня большой опыт в Java, C, структурах данных и алгоритмах из Университета.До начала этого проекта у меня был нулевой опыт веб-разработки, и я до сих пор достиг базовых знаний в области html, php, css и js.

В чем мне нужна помощь: моя текущая мини-цель для проекта - заставить пользователя ввести серийный номер и отобразить информацию о компьютере на той же странице.У меня есть мои файлы, показанные ниже.Мой process.php точно получает информацию о компьютере с заданным серийным номером и преобразует ее в объект JSON.Мой my_script.js - это то, что я использовал с моим test.php для тренировки отображения пользовательского ввода без перенаправления или обновления страницы.Мой myform.html, по-моему, довольно понятен, это просто форма для ввода серийного номера.Я понимаю, как работает мой код в my_script.js, но мне нужна помощь в его настройке для обработки возврата JSON.Будем весьма благодарны за любую помощь, ресурсы или общие идеи о проекте.

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";
}
?>

1 Ответ

0 голосов
/ 12 июня 2018

Вы можете дать "json" аргумент $.post, чтобы сообщить ему, что ответом является JSON, и он автоматически проанализирует ответ на объект или массив Javascript.В моем примере кода ниже я предполагаю, что это массив, а каждый элемент - это объект, который содержит свойство, которое вы хотите показать в результате;замените .someProperty фактическим свойством.

$("#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 может использовать $_POST['serialnumber'] при вызове API Airtable.

$sn = $_POST['serialnumber'];
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...