JavaScript 到 PHP 表单，基于用户输入

Question

我的主页上有一个简单的表单 (index.php)，它需要一个用户输入。

<form action="/run.php" method="POST" target="_blank"
    <input type="text" name="userinput">
    <button type="submit">Run!</button>
</form>

然后将该输入传递给 run.php，在此显示内容并将其插入 MySQL 数据库。

但是，我需要在该用户输入上运行 JavaScript 函数，然后将结果（来自 JavaScript 函数）输入到数据库中（因此将值从 JavaScript 传递到 PHP）。

我最初在 run.php 中有 JavaScript，用于计算和显示值，但我无法将值传递给 PHP 以插入数据库。

根据我的阅读，您不能在同一页面上将 JavaScript 值传递给 PHP，因为它需要某种 POST 或 GET，所以我试图在主页 index.php 然后使用隐藏的输入字段将值 POST 到 run.php 文件。

<input id='hidden_input' type='hidden' name='final-calc' value='random(userinput)' />

函数是 JavaScript Promise：

function random(userinput) {
    ....
    .then(function(userinput) { // Function needs to use the userinput from the form
         // calculations
         return X //(X being any random value)
    }
}

我遇到的两个问题是：

1. 我只能在用户输入值并提交表单后才能获得userinput 值，所以我不相信我可以将userinput 值传递给JavaScript 函数并仍然POST 返回的值?

2. JavaScript 函数是一个异步 Promise，但显然，这可能没有效果 - 所以它可能不是问题。

Answer 1

这里的关键是 AJAX。您必须使用纯 JS 检索用户输入，进行所需的任何计算，然后将结果发送到您的 PHP 脚本。我留下了一个小提琴：https://jsfiddle.net/k5xd54eu/1/

<input type="text" id="userinput" name="userinput"/>
<button onclick="inputhandler();">TEST</button>

<script>
function inputhandler() {
  var text = document.getElementById('userinput').value;
  alert(text);

  /*DRAGONS BE HERE*/
  /*THEN*/
  /*USE AJAX HERE TO PASS THE RESULTS TO PHP SCRIPT*/
}
</script>

我不是在解释如何实现 AJAX 调用来发送结果，主要是因为这也是个人喜好问题。例如，您可以使用纯 JS 或诸如 jQuery 之类的库（这是我个人的偏好，因为它非常干净和简单）。看这里：

http://api.jquery.com/jquery.ajax/

这里：

https://www.w3schools.com/jquery/jquery_ajax_intro.asp

了解更多信息。

编辑： 因为我已经提到了 AJAX，所以包含一些代码会更正确。所以这就是我通常用于简单 POST 的方法（它基于 jQuery 库，所以要小心包含它）：

var url = 'ajaxhandler.php';
var stuff = '1234abcd';

$.ajax({
        type: "POST",
        url: url,
        data: {stuff: stuff},
        success: function (data) {
           /*Do things on successful POST*/
        }
        });