gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 07:38:54 25 4
gpt4 key购买 nike

我现在一直在尝试制作一个网络表单,但在服务器处理部分(表单中输入的数据被发送到服务器并接收来自服务器的响应)后面不断遇到麻烦。

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

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

我基本上想要得到像网络表单一样简单的东西,要求您提交 1-24 之间的数字,然后让它返回字母表中相应的字母。因此,如果您提交超过数字 1,您将收到服务器“a”返回的响应,依此类推。我不希望选择列表位于客户端,我希望它位于服务器中,以便我可以发帖。

如果有帮助,我可以访问 Microsoft Azure,因此,如果启动某种服务器或虚拟机有助于我完成服务器处理部分,请告诉我。这是我第一次这样做。

最佳答案

这是一个非常深入的问题,但我可以给出一些指导。

您需要选择一个服务器(Windows、Apache、Glassfish 等),选择与您的服务器兼容的服务器端语言(PHP、ASP、Python、Java),安装该语言、学习和试用 -在你的 friend 的帮助下发生错误。

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

前往 c9.io(基于 Web 的 IDE)。创建一个免费帐户并登录。

创建一个新工作区。给它一个名称和描述(您可以拥有一个免费的私有(private)工作区,如果想要更多,您将需要付费。但是,您可以创建许多公共(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 方法将输入的数字发送到服务器。第一个参数是服务器页面,第二个参数是包含服务器所需信息的对象,第三个参数是一个函数,说明返回页面时如何处理该信息。这样就完成了客户端页面。

打开 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),并接受通过 POST 方法传递的名为“number”的参数。如果这个数字已设置,并且是数字,并且在 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 读取变量。使用 echo 发回数据。

关于javascript - Web 表单的服务器处理部分仍不清楚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35493665/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com