如何在不重新加載頁面的情況下將數據javascript傳遞到php頁面

Question

嗨，伙計們需要關於如何使用 javacript 將值傳遞給 php 而無需重新加載頁面的幫助。 我想要發生的是，當我在文本框名稱 num1 中放置一個值時，該值將轉到 available.php .. 提前謝謝你。 ...

這是我的代碼..

html代碼

    <!-- Modal Staff-->
     <div id="add" class="modal fade" role="dialog" tabindex="-1" >
      <div class="modal-dialog">
       <form action="dashboard.php" method="post">
        <!-- Modal content-->
         <div class="modal-content">
         <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times; 
        </button>
        <h4 class="modal-title">Set Available Student</h4>
        </div>
         <div class="modal-body">
         <input type="text" name="num1" id="num1"  class="form-control" />
      </div>
      <div class="modal-footer">
        <input type="submit" name="submit" class="btn btn-success" value="Set">
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
    </form>
  </div>
</div>

javascript代碼

    <script type="text/javascript">

    function availble_chair()
    {
    xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET","available.php",false);
    xmlhttp.send(null);
    document.getElementById("count").innerHTML=xmlhttp.responseText;
    }
    availble_chair();
    setInterval(function(){ 
    availble_chair();
    },1000);
    </script>

這是我的 php 代碼 available.php

<?php

    $set = '';

    $connection = mysqli_connect("localhost","root","","dbattendancelibrary");
    $query=mysqli_query($connection,"SELECT COUNT(Time_in)-COUNT(Time_out) as Status FROM `tbl_student_form`");
    $result = mysqli_fetch_array($query, MYSQLI_NUM);
    if($result) {
        if($result[0] <= $set) {
            $availble = $set-$result[0];
            echo "<p style='font-size:50px;margin-left:240px;'> " .$availble. " 
            </p>";
         } else {
            echo "<p class='alert alert-danger'>Library Already Full</p>";
         }         
    }
?>

Answer 1

Javascript：

首先，您需要一個on submit事件偵聽器，以便我們可以檢測表單何時提交。

// get a reference to your form

var form = document.getElementsByTagName('form');

// i suggest adding a classname or ID to your form if you have more then one form on the page
// if that is the case, then select the form by ID or class instead

// add event listener to the form

form.addEventListener('submit', function(event) {

    // stop form submitting by default

    event.preventDefault();

    // get the value from the textbox, num1

    var num1 = this.querySelector('#num1').value;

    // send value of num1 to available.php via ajax

    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'available.php');
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onload = function() {
        if (ajax.readyState == 4 && ajax.status == 200) {
            console.log("I worked!");
        } else {
            console.log("I didn't work!");
        }
    };
    xhr.send(encodeURI('num1=' + num1));

}

PHP

從 AJAX 請求中獲取num1值：

<?php

$num1 = isset($_GET['num1']) ? (int) trim($_GET['num1']) : 0;

if ($num1 > 0) {
    // success
}

?>