Web 表单的服务器处理部分仍然不清楚

Question

我一直在尝试制作一个网络表单，并且经常运行在服务器处理部分（表单中输入的数据被发送到服务器并接收响应）后面遇到麻烦来自服务器）。

我认为以我的经验水平的大多数人（我仍然将自己归类为 webdev 的新手）可以相对轻松地创建基本的网络表单，但是如果文本框不将任何输入的数据发送到任何地方，您不会有功能性的网络表单。这就是我想学习设计网络表单的下一步。

我通常可以找到很多关于如何使用文本框、下拉菜单、基本上任何元素等构建表单的资源。我很难找到真正的服务器，我可以测试我输入的数据并从服务器接收回响应，并以某种方式将其解析到评论框中，这样我就可以对我的 Web 表单进行功能概念化。

我基本上想得到一些简单的东西，比如一个 Web 表单，它要求您提交 1-24 之间的数字，然后让它 return 字母表中的相应字母。因此，如果您提交超过数字 1，您将收到服务器返回的响应 "a"，依此类推。我不希望选择列表是客户端的，我希望它在服务器中，这样我就可以制作 post.

如果有帮助，我可以访问 Microsoft Azure，所以如果启动某种服务器或 VM 对我的服务器处理部分有帮助，请告诉我。这将是我第一次这样做。

Answer 1

这是一个相当深入的问题，但我可以提供一些建议。

您需要选择服务器（Windows、Apache、Glassfish 等），选择与您的服务器兼容的服务器端语言（PHP、ASP、Python, Java), 在 SO 的朋友的帮助下安装该语言、学习和反复试验。

但是，我将详细介绍一种您可以快速练习的方法。

前往 c9.io（基于网络的 IDE）。创建一个免费帐户并登录。

创建一个新的工作区。给它起个名字和描述（你可以有一个免费的私人工作区，要更多，你必须付费。但是，你可以做很多 public 个——在测试用例中，这并不重要） .从列表中选择一个模板，然后单击创建工作区。对于此演示，请选择 PHP、Apache & MySQL。

创建后，您应该会在左侧看到您的工作区，以及其中包含的文件。您应该在工作区中有一个 hello-world.php、readme.txt 和 php.ini。您可以阅读自述文件，并删除 hello-world.php（或将其重命名为您的服务器页面应有的名称）。

为此，我删除了 hello-world.php，并创建了两个文件：index.php 和 server.php（index.php 用于前端，server.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方法将输入的数字发送到服务器。第一个参数是服务器页面，第二个是一个对象，包含服务器所需的任何信息，第三个是一个函数，说明当它 return 发送到页面时如何处理信息。这样就完成了客户端页面。

打开server.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（含）之间，它将使用 toLetter 函数将字母表中的相应字母发送回客户端页面（这将依次在输入中显示结果#results)。如果号码未发送（提交 POST 时没有任何数据），它将 return 消息 "No input detected."。如果数字无效（太高、太低或 NaN），它将 return 消息 "Please enter a number between 1 and 26".

在 c9 中保存这两个页面后，您可以按顶部的 "Run Project" 按钮启动虚拟服务器。一旦运行（您可以在屏幕底部看到控制台），单击预览 > 预览运行应用程序。

您应该看到两个输入，一个标记为数字，一个标记为字母。如果您在数字字段中输入 1 到 26 之间的数字，您将看到相应的字母表中的字母。

这将使您开始了解前端后端情况；至少 HTML、AJAX 和 PHP。如果您使用 GET 而不是 POST，您将查找 PHP 的 $_GET 数组而不是 $_POST 数组。在 $.post 的第二个参数中，您可以在对象中发送任意多的数据。如果您在后端使用数据库，请确保您学习准备好的语句，或者至少先进行输入清理。

下一步。生成一些很棒的客户端到服务器端代码，直到它崩溃...然后返回这里为您的下一个问题提供一些代码:)

编辑：tl;dr - 使用 jQuery AJAX 从客户端发送到 PHP。使用 $_POST 或 $_GET 读取变量。使用 echo 发回数据。

Web 表单的服务器处理部分仍然不清楚

Server-processing portion of a webform still unclear

javascript

jquery

json

webforms