Javascript 变量传输：与PHP连接到数据库的Web表单

您好，谢谢您查看我的问题。我是一个完全的初学者，正在寻找简单的方法来做以下

我在单独的链接文档中拥有的内容： HTML、CSS、Javascript、PHP

我遇到的问题是：

我需要使用类似于JSON的东西（尽管我也会接受XML请求或Ajax，如果它们有效的话）将变量从Javascript传输到PHP。我需要在数据库中搜索变量，因此它们需要在PHP中真正可用（不仅仅在弹出消息或其他东西上看到）

我已经看到了很多不同的方法，我甚至在YouTube上观看了教程，但没有任何方法对我有效。我最大的问题是，当我在表单中添加提交按钮时，它不会提交表单，我不知道为什么

表单代码段：

<form id="form" name="input" method="post" action="javascript:proofLength();">
<input id="userinput" type="text" autofocus />
<input id="submit" type="button" value="submit" onsubmit="post();">
</form>

倒数第二行不行。我需要javascript来提交表单吗？因为我真的认为在这种情况下，它是表单功能的一部分，就像method=“post”

另一件事是，对于JSON，我不知道该做什么，因为我的变量是由用户输入决定的。因此，我无法自己定义它们。它们仅由document.getElement定义。。。这不符合JSON的语法

这些确实是我目前的主要问题。所以，如果有人能给我一个简单的方法来完成变量传递，那将是令人惊讶的

在这之后，我需要在我的数据库中搜索/比较一些php/sql（它已经很好地连接了），并且我需要能够根据我发现的真实情况将信息返回到HTML中。我看到了一个例子，但我不确定这是否非常适用于我正在做的事情，所以如果你能解释如何做到这一点，那也太好了

非常非常感谢。

---

四月

问题出在这方面

<form id="form" name="input" method="post" action="javascript:proofLength();">

对于您的php页面：

<?php
$userinput = $_POST["userinput"];
//Do what ever you need here
?>

---

如果您想在提交表单之前在javascript中执行某些操作，请参阅

，提交表单不需要ajax。你甚至不需要脚本。只要这样做：

<form id="form" name="input" method="post" action="mytarget.php">
<input id="userinput" name="userinput" type="text" autofocus />
<input id="submit" type="submit" value="submit" />
</form>

这将把表单数据发送到mytarget.php（当然可以更改）

请注意，我已将name属性添加到表单中的文本字段中，并将按钮类型更改为submit。 现在，您可以在mytarget.php中这样处理数据：

<?
$username = $_POST['userinput'];
echo "Your name is: ".$username;
?>

var form = document.getElementById("form");
form.addEventListener("submit", function(event){
    console.log("test");
  var name = form.elements['userinput'].value;
    if(name.length < 3){
        alert("boy your name is short!");
        event.preventDefault();
    }
});

您希望在提交中检查长度。有两种方法可以做到这一点：

在发送输入之前（服务器不受干扰）

让服务器检查输入

对于1，您必须附加一个事件侦听器，如下所示：

<?
$username = $_POST['userinput'];
echo "Your name is: ".$username;
?>

var form = document.getElementById("form");
form.addEventListener("submit", function(event){
    console.log("test");
  var name = form.elements['userinput'].value;
    if(name.length < 3){
        alert("boy your name is short!");
        event.preventDefault();
    }
});

var form=document.getElementById（“表单”）；
表单。addEventListener（“提交”，函数（事件）{
控制台日志（“测试”）；
var name=form.elements['userinput'].value；
如果（名称长度<3）{
警惕（“男孩，你的名字很短！”；
event.preventDefault（）；
}
});

输入少于3个字符的名称，则不会提交表单。在此处测试：

在服务器端测试它

在mytarget.php中：

  <?
    $username = $_POST['userinput'];
    if(strlen($username) > 3)
        echo "Your name is: ".$username;
    else 
        echo "your name was too short!";
  ?>

---

您还可以使用ajax完成所有这些工作。你会在这里找到很多好的内容。但是我推荐一个像

jQuery

这样的框架来解决这个问题。

谢谢你，但我不太确定应该如何解决这个问题。在将变量引入PHP之前，我需要先在JavaScript中做很多事情。。。除非你的意思是我的变量应该先直接进入PHP，然后进入JS？但我也不知道怎么做……不，在proof-length函数中可以做任何需要的事情，但在函数的末尾必须调用form.sumbit（）。如果您有其他变量要发送到服务器，您可以使用我的意思是计算的变量，并且您不希望它们在GUI中对用户可见。我已经更新了我的答案，说明如何在Sumbit之前执行javascript。注释缺少您需要执行的操作：）这非常有用！非常感谢。但不幸的是，我确实需要JS——这是任务的一部分……甚至还有javascript部分的演示。您可以清楚地看到如何使用JS检索表单元素并使用它。你还想要什么？对不起，我没意识到你继续解释JS。我已经有了一个有效的函数。我仍然不明白的是如何将变量从JS传输到PHP。。。除非每个人都想说我根本不需要JS中的变量……但我想我需要吗？无论如何，这是任务的一部分。XML请求可能是最好的，但我不确定如何实现它。请阅读以下内容：