Question

项目目标：用户输入计算机的序列号，检查号码，如果它与我们的Airtable基础中的计算机匹配，我们会向其添加一些信息，并在不同的选项卡中为其创建新条目。

我的经验：我在大学的Java，C，数据结构和算法方面拥有丰富的经验。在开始这个项目之前，我没有在Web开发方面的经验，到目前为止已经获得了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";
}
?>

Answer 1

您可以向"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在调用Airtable API时可以使用$_POST['serialnumber']。

$sn = $_POST['serialnumber'];

使用AJAX jQuery从PHP脚本返回JSON数据

1 个答案: