时间戳

首页 > 解决方案 > 使用 AJAX jQuery 从 PHP 脚本返回 JSON 数据

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

问题描述

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

我的经验：我在大学的 Java、C、数据结构和算法方面有很多经验。在开始这个项目之前，我在 Web 开发方面的经验是零，到目前为止，我已经掌握了 html、php、css 和 js 的基本知识。

我需要帮助：我目前对该项目的迷你目标是让用户输入序列号并将计算机信息显示在同一页面上。我的文件如下所示。我的 process.php 准确地检索给定序列号的计算机信息并将其转换为 JSON 对象。我的 my_script.js 是我与 test.php 一起使用的，用于练习在没有重定向或页面刷新的情况下显示用户输入。我的 myform.html 我相信是非常不言自明的，只是一个输入序列号的表格。我了解 my_script.js 中的代码如何工作，但需要帮助调整它以处理 JSON 返回。任何有关该项目的帮助、资源或总体想法将不胜感激。

我的表格.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);
  });
});

进程.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); 
?>

测试.php

<?php

$sn = $_POST['serialnumber'];

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

标签： javascriptphpjqueryhtmlajax

解决方案

您可以给它一个"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']在调用 Airtable API 时使用。

$sn = $_POST['serialnumber'];

推荐阅读