如何在 html 表单上将值从 javascript 传递到 php？

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

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

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

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<form>

</form>

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 变量中的值传递给它？

慕森王

浏览 169回答 2

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>

慕的地8271018

使用带有 post 方法的 jquery ajax 调用：像这样：- html：<form>    <input id="phone" type="tel" name="phone">    <button type="button" onclick="return send_number();">Call</button></form>查询：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;        }                });}

随时随地看视频慕课网APP