Question

我会使用getElementById（）获取值并传递给PHP上的变量。

<script>
function addMachine() {
  var ip = document.getElementById('ipTextBox').value;
  document.getElementById('ipTextBox').submit;
}
<\script>

HTML看起来像那样

<div class="container">
     <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addMachine">
     <div class="modal fade" id="addMachine" role="dialog">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Add new machine</h4>
                </div>
                <div class="modal-body">
                    <label>Insert machine IP<input id="ipTextBox"></input></label>
                </div>
                <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal" onclick="addMachine()">ADD</button>
                </div>
            </div>
        </div>
    </div>
<\div>

我对如何将其传递给PHP变量没有任何想法。

Answer 1

PHP是一种后端语言，用于呈现HTML并在页面加载时将其发送到客户端。而Javascript是一种客户端语言。如果你想将变量从JS发送到PHP，基本上是从客户端向服务器发送信息而不重新加载页面，你需要使用AJAX：

AJAX代表＆＃34;异步JavaScript和XML＆＃34;。虽然名称包含XML，但由于格式更简单，冗余度更低，因此更常使用JSON。 AJAX允许用户与外部资源进行通信，而无需重新加载网页。 Stackoverflow关于Javascript AJAX的文档

使用AJAX

我在文档页面上发了帖子，就在这里。我希望它可以帮助你理解它是如何工作的。

此功能使用GET运行AJAX调用，允许我们将参数（对象）发送到文件（字符串）并启动回调（函数）请求结束时。

function ajax(file, params, callback) {

  var url = file + '?';

  // loop through object and assemble the url
  var notFirst = false;
  for (var key in params) {
    if (params.hasOwnProperty(key)) {
      url += (notFirst ? '&' : '') + key + "=" + params[key];
    }
    notFirst = true;
  }

  // create a AJAX call with url as parameter
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      callback(xmlhttp.responseText);
    }
  };
  xmlhttp.open('GET', url, true);
  xmlhttp.send();
}

以下是我们如何使用它：

ajax('cars.php', {type:"Volvo", model:"300", color:"purple"}, function(response) {
  // add here the code to be executed when data comes back to this page      
  // for example console.log(response) will show the AJAX response in console
});

以下显示如何检索cars.php中的网址参数：

if(isset($_REQUEST['type'], $_REQUEST['model'], $_REQUEST['color'])) {
  // they are set, we can use them !
  $response = 'The color of your car is ' . $_REQUEST['color'] . '. ';
  $response .= 'It is a ' . $_REQUEST['type'] . ' model ' . $_REQUEST['model'] . '!';
  echo $response;
}

如果你在回调函数中有console.log(response)，那么控制台中的结果就是：

你的车的颜色是紫色的。这是沃尔沃300型车型！

使用HTML表单

在您的HTML页面中，您必须包含一个表单

<form action="get_data.php" method="get">
  Name: <input type="text" name="name"><br>
  E-mail: <input type="text" name="email"><br>
  <input type="submit">
</form>

在get_data.php（目标文件）中，你必须写：

<?php
echo $_GET["name"];
echo $_GET["email"];

然而，第二种方法会将用户重定向到get_data.php，我个人并不喜欢它，更喜欢AJAX的效率。

将JS变量发送给PHP

1 个答案: