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

报告相同问题?

悬赏问题

  • ¥15 filenotfounderror:文件是存在的,权限也给了,但还一直报错
  • ¥15 YOLOv5在进行trainpy训练后为什么会出现这种情况(语言-python)
  • ¥15 关于远程桌面的鼠标位置转换
  • ¥15 MATLAB和mosek的求解问题
  • ¥20 修改中兴光猫sn的时候提示失败
  • ¥15 java大作业爬取网页
  • ¥15 怎么获取欧易的btc永续合约和交割合约的5m级的历史数据用来回测套利策略?
  • ¥15 有没有办法利用libusb读取usb设备数据
  • ¥15 为什么openeluer里面按不了python3呢?
  • ¥15 关于#matlab#的问题:训练序列与输入层维度不一样