Question

我确实是网络开发的小伙子，我正在努力为我的工作建立一个工具。

我们有一个Airtable数据库，我们会在我们支持的计算机和我们回收的计算机上保留最新信息。

在回收计算机时，我们必须在Airtable中执行一些步骤，这些步骤与更新计算机列表中的计算机字段并将计算机及其部分信息添加到回收列表有关。

我的目标是在计算机的序列号中使用一种类型，然后让它执行这些步骤。到目前为止，我有一个php文件，可以检索计算机信息（如果存在）并将其显示为JSON。

我已经通过路由到html文件的php表单输入了序列号。我想让表单不重新路由，只需在同一页面上提取数据。

我知道这可以通过AJAX和JQuery完成，但老实说，我无法找到有关如何执行此操作的任何一般信息。我找到了不能解释所有内容的例子，所以如果我试图做出改变，它会中断。

有人可以指出我可以使用的一些资源来处理如何POST到php文件并使用JSON jquery返回AJAX数据吗？

下面我发布了我的简单测试，我想提交表单并在页面上加载消息而不刷新。目前，当我点击提交并向我显示JSON响应和内容时，它会加载我的test.php页面。逻辑正在起作用，因为无论我是否输入内容，它都会显示不同的响应。

这是我的index.html：

<html>
<head>
<title>Computer swap form</title>
</head>

<body>
<form method = "post" action = "test.php" id="computerForm">
Serial Number: <br>
<input id="serialnumber" name="serialnumber" type="text">

<input id = "btn_send" type="submit" value = "Submit">



</form>

<!--display the response returned after form submit -->
<span class="response"></span>

<script type="text/javascript" src = "https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function(){
    //using AJAX to submit form and get response without refreshing the page

    var form() = $("#computerForm");

    form.submit(function (e){
        $(this).attr("disabled","disabled"); //disable submit button
        e.preventDefault();
        $.ajax({
            type: form.attr("method"), //post
            url: form.attr('action'), //test.php
            data: form.serialize(), //valueas of all fields
            dataType:"json", //set respones data type to json
            success: function(data) {
                //print JSON response content here
                $(".response").text(data.content);
            },
            error:function (data) { //error on AJAX failure
                $(".response").text("An error occurred");
            }
        })
    }
})  
</script>
</body>
</html>

这是test.php：

header("Content-type:application/json;charset=utf-8"); //set the content type

$error = false;
$serialnumber = $_POST["serialnumber"];

//check that input is non empty
if(empty($serialnumber)){
    $error = true;
}

if ($error == false) {
    $data['response'] = "success";
    $data['content'] = "Thank you for serial number";
}
else {
    $data['response'] = "error";
    $data['content'] = "Serial number not processed";
}

echo json_encode($data);  //will encode the data and echo the json array

创建在线表单以向数据库添加元素（Airtable）

0 个答案: