我一直在尝试制作网络表单，并且经常遇到服务器处理部分（从表单输入的数据被发送到服务器并接收来自服务器的响应）的麻烦。
我认为以我的经验水平的大多数人（我仍然认为自己是webdev的新手）可以相对容易地创建一个基本的Web表单，但是如果文本框没有将任何输入的数据发送到任何地方，您将没有一个功能性的Webform。这就是我想学习设计网络表单的下一步的地方。
我通常可以找到很多关于如何使用文本框、下拉列表、基本上任何元素等构建表单的资源。我很难找到的是实际的服务器，我可以测试我输入的数据并从服务器接收回响应，并以某种方式将其解析到注释框中，以便我可以对我的 Web 表单进行功能概念化。
我想基本上得到一些简单的东西，比如一个网络表单，要求您提交一个 1-24 之间的数字，然后让它返回字母表中的相应字母。因此，如果您提交超过数字 1，您将收到来自服务器"a"的响应，依此类推。我不希望选择列表是客户端的，我希望它在服务器中，以便我可以发布帖子。
如果有帮助，我可以访问Microsoft Azure，因此，如果启动某种服务器或 VM 有助于我处理服务器部分，请告诉我。这将是我第一次这样做。
这是一个非常深入的问题，但我可以给出一些指示。
你需要选择一个服务器（Windows，Apache，Glassfish等），选择与你的服务器兼容的服务器端语言（PHP，ASP，Python，Java），安装该语言，学习，并在SO的朋友的帮助下试错。
但是，我将详细介绍一种可以快速练习的方法。
转到 c9.io（基于 Web 的 IDE）。创建一个免费帐户并登录。
创建新工作区。给它一个名称和描述（你可以有一个免费的私人工作区，为了更多，你必须付费。但是，您可以公开许多 - 在测试用例中，这并不重要）。从列表中选择一个模板，然后单击创建工作区。对于此演示，请选择PHP，Apache和MySQL。
创建后，您应该会在左侧看到您的工作区以及其中包含的文件。工作区中应该有一个 hello-world.php、readme.txt 和 php.ini。您可以阅读自述文件，并删除 hello-world.php（或将其重命名为服务器页面应重命名的任何名称）。
为此，我删除了hello-world.php，并创建了两个文件：index.php和server.php（index.php用于前端和服务器.php用于后端）。在 index.php 中，复制并粘贴以下代码：
<!doctype html>
<html>
<head>
<title>Test Index</title>
</head>
<body>
Number: <input id='number'>
Letter: <input id='results' readonly>
<script src='https://code.jquery.com/jquery-1.12.0.min.js'></script>
<script>
$('#number').on('keyup', function(){
$.post(
'server.php',
{number:$('#number').val()},
function(data){
$('#results').val(data);
}
);
});
</script>
</body>
</html>
这是一个非常基本的页面，但将有一个数字的输入，并且将有一个只读输入来显示来自服务器的结果。JS在数字输入上设置一个keyup侦听器，并使用jQuery的POST方法将输入的数字发送到服务器。第一个参数是服务器页面，第二个参数是包含服务器所需的任何信息的对象，第三个参数是声明在返回页面时如何处理信息的函数。这样就完成了客户端页面。
打开服务器.php文件（服务器端页面），然后复制并粘贴以下内容：
<?php
function toLetter($number) {
$arr = array('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z');
return $arr[$number - 1];
}
if(isset($_POST['number'])){
if(is_numeric($_POST['number']) && $_POST['number'] >= 0 && $_POST['number'] <= 26){
echo toLetter($_POST['number']);
}
else{
echo "Please enter a number between 1 and 26";
}
}
else{
echo "No input detected.";
}
?>
此页面包含一个函数 （toLetter），并接受通过名为"number"的 POST 方法传递的参数。如果设置了此数字，为数字，并且介于 0 和 26（含 0 和 26）之间，它将使用 toLetter 函数将字母表中的相应字母发送回客户端页面（客户端页面将在输入#results中显示结果）。如果未发送该号码（提交 POST 时没有任何数据），它将返回消息"未检测到输入"。如果数字无效（太高、太低或 NaN），它将返回消息"请输入 1 到 26 之间的数字"。
在c9中保存这两个页面后，您可以按顶部的"运行项目"按钮启动虚拟服务器。运行后（您可以在屏幕底部看到控制台），单击预览>预览正在运行的应用程序。
您应该会看到两个输入，一个标记为数字，一个标记为字母。如果在"数字"字段中输入 1 到 26 之间的数字，您将看到字母表中的相应字母。
这将使你从前端后端的情况开始;至少使用HTML，AJAX和PHP。如果你使用GET而不是POST，你会在PHP的$_GET数组而不是$_POST数组中查找。您可以在 $.post 的第二个参数中的对象中发送任意数量的数据。如果在后端使用数据库，请确保先学习预处理语句，或者至少先进行输入清理。
下一步。生成一些很棒的客户端到服务器端代码，直到它中断......然后回到这里，为您的下一个问题提供一些代码:)
编辑：tl;dr - 使用jQuery AJAX从客户端发送到PHP。使用 $_POST 或 $_GET 读取变量。使用回显发回数据。