如何将值从 javascript 传递到 html 表单上的 php？答案

【问题标题】：How can I pass the value from a javascript to php on an html form?如何将值从 javascript 传递到 html 表单上的 php？
【发布时间】：2019-07-18 07:50:50
【问题描述】：

我的用例是创建一个接受任何国际号码的 HTML 表单，并将其传递给一个 php 应用程序，该应用程序通过 Twilio API 调用该号码。现在 PHP 应用需要一个 HTTP POST 请求。

我正在使用 intl-tel-input javascript 来格式化和验证在 html 表单中输入的电话号码。作为这一切的新手，我想了解如何从运行在 html 表单上的 javascript 中获取格式化数字，并从同一个 html 表单实例化 post 方法并调用 php 应用程序。

到目前为止我只得到了这个，我不确定如何设置 post 方法来调用 php 应用程序？请问有什么想法吗？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<link rel="stylesheet" href="build/css/intlTelInput.css">
</head>
<body>

<form>
    <input id="phone" type="tel" name="phone">
    <button type="submit">Call</button>
</form>

<script src="build/js/intlTelInput.js"></script>
<script src="build/js/prism.js"></script>
<script src="build/js/isValidNumber.js"></script>

<script>
var input = document.querySelector("#phone");
window.intlTelInput(input, {
    separateDialCode: true,
    utilsScript: "build/js/utils.js",
}); 

</script>

</body>
</html>

下面是发起实际电话呼叫的 PHP 文件：

<?php

require_once '/path/to/vendor/autoload.php';

use Twilio\Rest\Client;

$sid    = "ACXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
$token  = "your_auth_token";
$twilio = new Client($sid, $token);
$from = "xxxxx";
$to = $_POST['phone'];

$call = $twilio->calls
->create($to, $from, array("url" => "http://demo.twilio.com/docs/voice.xml"));
print($call->sid);

正如我所提到的，问题是如何从上面的 html 表单中调用这个 php 应用程序并将 phone 变量中的值传递给它？

【问题讨论】：

只需使用JS验证/更新HTML表单字段并正常发布？
到目前为止您尝试过什么？你被困在哪里了？

标签： javascript php html

【解决方案1】：

使用带有 post 方法的 jquery ajax 调用：像这样：- html：

<form>
    <input id="phone" type="tel" name="phone">
    <button type="button" onclick="return send_number();">Call</button>
</form>

jquery：

function send_number()
{
    var post_data = { };
    var phone = $("#phone").val();
    post_data['phone'] = phone;
    var APPUrl = 'App_receive_number.php'; 
    $.ajax({
        type: "POST",
        url: APPUrl,
        data: post_data,
        cache: false,
        success: function(res)
        {
          alert("Success! Sent!"); return true;
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert("Failed! Please Try Again!");
            return false;
        }            
    });
}

【讨论】：

【解决方案2】：

第一个<button type="submit">Call</button> => <button type="button" id="submitButton">Call</button>

然后添加一些Javascript：

<script>
window.onload = function() {
    const button = document.querySelector("#submitButton");
    button.addEventListener('click', () => {
        sendRequest();
        alert('button clicked');    
    });
}
function sendRequest() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     console.log(this.responseText);
    }
  };

  const number = document.querySelector("#phone").value;

  xhttp.open("POST", "/path/to/php/endpoint", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send(`number=${number}`);
}
</script>

【讨论】：

非常感谢，这有效。不确定我是否了解所有功能，但我希望学习...
window.onload 是为了确保在加载 DOM 时而不是更早地设置事件监听器。如果