- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我现在一直在尝试制作一个网络表单,但在服务器处理部分(表单中输入的数据被发送到服务器并接收来自服务器的响应)后面不断遇到麻烦。
我认为以我的经验水平的大多数人(我仍然将自己归类为 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/
我在 mongodb 中的玩家和锦标赛之间存在多对多关系。 我希望能够一次将许多玩家添加到锦标赛中。如果没有 ajax,这很简单,但我们有一个包含数千名玩家的数据库,因此表单选择变得巨大。 我们想为此
这个问题已经有答案了: When should I use html's and when spring's in Spring MVC web app? (3 个回答) 已关闭 6 年前。 我正
我正在 C++ Builder XE4 上使用 VCL。 我有以下组件。 FormMain 具有 TButton *B_select; FormSelect(或DialogSelect)具有 TCom
如何在不影响表单控件的情况下更改表单的 alphablend? 德尔福XE7 最佳答案 此问题的一个解决方案是使用多设备应用程序(如果无法使用VCL)。 如果您需要保留透明的TForm,只需更改属性T
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开,visit the help center . 关闭 1
我正在尝试扩展 Django 注册以包含我自己的注册表单。原则上这是相当简单的。我只需要编写自己的表单( CustomRegistrationForm ),它是原始表单( RegistrationFo
我正在尝试为我的网站实现聊天功能。为了做到这一点,我遵循了以下教程:https://channels.readthedocs.io/en/latest/tutorial/ 然后我稍微更改了代码以实现它
有一个问题,我需要用一个 html 表单提交两个相互关联的模型表单。我知道如何提交两个单独的表格,但是在相关模型表格的情况下外键让我发疯。 问题是,第二个表单应该用外键填充字段到第一个表单的实例。 在
我正在创建一个工具,允许某人输入食谱,然后将其保存为 XML 文件,我已经创建了 XSD,但我想知道如何在我的网页上制作一个表单以允许用户输入他们的食谱并遵守模式。我一直在研究 Ajax 和 Jque
在 .net win 表单(如 asp.net web 表单)中是否有可用的验证控件? 因为很难为我的每个控件设置正确的条件,所以我的表单中也有很多重复的代码。 正确的做法是什么? 最佳答案 看看这个
我有一个简短的问题。我正在学习如何使用 javascript 制作注册表,发现此链接非常有用。 http://www.w3resource.com/javascript/form/javascript
我正在开发一个项目,该项目将使用循环将许多表单添加到 mysql 数据库中。在 javascript 部分中,我无法让 var i 在函数 updatesum() 中工作。有人可以帮我吗? 我试图避免
在我的应用程序上有一个包含 2 个字段和一个保存按钮的表单。 在我的 onClick 结束时我需要什么来将光标返回到第一个字段。 我有这个来清除它们 txtData.setText("
这个问题不太可能帮助任何 future 的访问者;它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况有关,这些情况并不普遍适用于互联网的全局受众。为了帮助使这个问题更广泛地适用,visit
<input type="text" name="textfield" onKeyPress="javascript:alert(event.
我正在构建的网站有一个登录表单,作为所有其他模板扩展的 base.html 模板的一部分;因此,我需要以某种方式处理每个页面上的登录/注销逻辑。 目前每个页面都在单独的 View 中加载,那么实现它的
我有一个表单类,看起来像.. #forms.py class ExampleForm(forms.Form): color = forms.CharField(max_length=25)
有没有办法在表单定义中给表单一个特殊的错误渲染函数?在 customizing-the-error-list-format 下的文档中它展示了如何为表单提供特殊的错误呈现函数,但似乎您必须在实例化表单
我正在处理由多个页面组成的表单,我想解决验证问题。 当我点击提交按钮时,当前页面上的所有字段都会在下方显示错误消息,但是如果我更改页面,那么我需要再次点击提交,因为这些字段未设置为已触摸。 如果我可以
是否可以附加到继承表单的 exclude 或 widgets 变量? 到目前为止,我有以下设置。 class AddPropertyForm(forms.ModelForm): num_mon
我是一名优秀的程序员,十分优秀!