JS-Variable an PHP senden

Question

Ich würde den Wert mit getElementById() nehmen und an eine Variable in PHP übergeben.

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

Das HTML sieht aus wie diese

<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> 

Ich habe keine Ideen, wie dies zu einer PHP-Variablen zu übergeben.

Answer 1

PHP ist eine Backend-Sprache, mit der HTML gerendert und beim Laden der Seite an den Client gesendet wird. Und Javascript ist eine Client-Sprache. Wenn Sie Variablen von JS PHP senden möchten, im Grunde Informationen vom Client zum Server ohne Neuladen der Seite zu senden, müssen Sie AJAX verwenden:

AJAX steht für „Asynchronous JavaScript and XML“. Obwohl der Name XML enthält, wird JSON aufgrund seiner einfacheren Formatierung und geringeren Redundanz häufiger verwendet. AJAX ermöglicht dem Benutzer, mit externen Ressourcen zu kommunizieren, ohne die Webseite neu zu laden. Stackoverflow in der Dokumentation auf Javascript AJAX

• Mit AJAX

ich einen Beitrag auf der Dokumentations-Seite gemacht haben, hier ist es. Ich hoffe es hilft dir zu verstehen, wie es funktioniert.

Diese Funktion führt einen AJAX-Aufruf GET ermöglicht es uns, Parameter (Objekt) zu einer Datei (string) und starten Sie eine Rückruf (Funktion) zu senden, wenn die Anfrage beendet wurde.

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(); 
} 

Hier ist, wie wir sie verwenden:

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 
}); 

und die folgende zeigt, wie die URL-Parameter in cars.php retreive:

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; 
} 

Wenn Sie console.log(response) in Callback-Funktion das Ergebnis hatte in Konsole wäre gewesen:

Die Farbe Ihres Autos ist lila. Es ist ein Volvo Modell 300!

• Mit einem HTML-Formular

In der HTML-Seite müssen Sie haben Sie

<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> 

Und in get_data.php (die Zieldatei) eine Form umfassen zu schreiben:

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

Diese zweite Methode wird jedoch den Benutzer auf get_data.php umleiten, ich persönlich mag es nicht wirklich und bevorzuge AJAX für seine Effizienz.