簡體   English   中英

通過 jquery 參考變量 php

[英]Pass jquery consult to variable php

我正在做一個頁面,您可以在其中選擇您所坐的椅子,有點像公共汽車座位系統,我做了一個 JQuery 句子來識別椅子,我想將標識符作為動態值傳遞給 PHP。 有辦法嗎?

我的宴會廳代碼:

<?php
session_start();
?>

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <p class="instructions"> Choose your seat</p>
<div class="hipermain">
    <section class="party">
        <section class="table-container">
            <img onclick="checker()" src="img/table.png" alt="table" class="table">
            <img onclick="checker()" src="img/chair-available.png" alt="chair" class="chair pos1">
            <img onclick="checker()" src="img/chair-available.png" alt="chair" class="chair pos2">
            <img onclick="checker()" src="img/chair-available.png" alt="chair" class="chair pos3">
            <img onclick="checker()" src="img/chair-available.png" alt="chair" class="chair pos4">
            <img onclick="checker()" src="img/chair-available.png" alt="chair"
   
</div>
<script>
    async function getChairs(){
        let url = "code/chairs.php";
        await fetch(url)
        .then(response=>response.json())
        .then(data=>{
            console.log();

            data.forEach(chair=>{
                console.log(".pos"+chair.id);
                var $refChair=$(".pos" + chair.id);
                $refChair.attr("src","img/chair-occupied.png");
                $refChair.attr("data-bs-toggle",".popover");
                $refChair.attr("title","This chair is occupied by: ");
                $refChair.attr("data-bs-content", chair.name);
                new bootstrap.Popover($refChair);
                console.log(chair.id)
            });
        })
    }
    getChairs()
</script>
<script>
 $(".chair").on("click",function(){
     console.log($(this).attr("class"))
    });
    function checker(){
        var result =  confirm('You have chosen a chair you want to proceed to check out? ');
        if (result == true){
            window.location.href = "paymethod.php";
        }
    }
</script>
</body>
</html> 

正如我所說,有沒有一種方法可以只獲取被選中的椅子的編號並將其作為一個變量來用作椅子標識符?

您已經在使用帶有fetch()的 Fetch API,所以只需再次使用它來將選定的椅子發布到您的 PHP 腳本?

https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

這是另一個解釋如何使用Fetch API發送POST請求的鏈接: POST Request with Fetch API?

如果您不想使用 Fetch API,您仍然可以按照此處所述使用XMLHttpRequesthttp://vanilla-js.com/

添加椅子編號作為元素的數據屬性。 然后您可以使用.data()獲取它並在點擊處理程序中使用它。

 $(".chair").on("click", function() { console.log($(this).data("chair")) });
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section class="table-container"> <img src="img/table.png" alt="table" class="table"> <img src="img/chair-available.png" alt="chair" class="chair" data-chair="1"> <img src="img/chair-available.png" alt="chair" class="chair" data-chair="2"> <img src="img/chair-available.png" alt="chair" class="chair" data-chair="3"> <img src="img/chair-available.png" alt="chair" class="chair" data-chair="4"> </section>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM