doujuan9698 2018-06-12 19:09
浏览 81
已采纳

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

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";
}
?>
  • 写回答

1条回答 默认 最新

  • dtwxmn8741 2018-06-12 19:20
    关注

    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'];
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥20 XP系统的老电脑一开机就提示找不到rundll.exe,付费求解
  • ¥15 milvus查询出来的score怎么转换成0-1之间的相似性
  • ¥15 多ip服务器站群如何搭建l2tp服务器
  • ¥15 lvgl V9移植到linux开发板
  • ¥15 VB.net中在窗体中创建一个button控件来关闭窗体,但是提示错误,我该怎么办
  • ¥15 网上下载好的程序但是arduinoIDE编程报错,运行不了,哪里出错了,能具体给改一下吗
  • ¥15 Sharepoint JS开发 付费技术指导
  • ¥15 输入程序运行仿真后,烟雾值不实时检测,变成固定值
  • ¥20 数据排序,可选择排序方向
  • ¥15 修改一下代码,考虑进程到达时间不同的情况