使用Java脚本更改PHP输出

Question

• Im building a website that prints some data to a table from a mySQL database using PHP.
• I would like this data to be refreshed with a different search query when I flip a switch.

Here is the javascript function for the switch:

function switch2hecked() {
    if (document.getElementById("switch2").checked)
                             // update mySQL query  }

My PHP code looks like this:

        $sql = "SELECT * FROM $table WHERE day = 'mon' ORDER BY realtime";
        $result = mysqli_query($con, $sql);
        while($row = mysqli_fetch_array($result)) {             
            echo
            "<div class='dtime' >".$row["displaytime"]."</div>"
            ."<div class='name' >".$row["name"]."</div>"
            ."<div class='venue' >".$row["venue"]."</div>"
            ."<div class='address' >".'<a href="'.$row["loc"].'"target="_blank"> '.$row["address"].'</a>'."</div>"
            ."<div class='signup' >".$row["signup"]."</div>"
            ."<div class='email' >".'<a href="mailto:'.$row["email"].'"target="_blank"> '.$row["email"].' </a>'."</div>"
            ."<div class='details' >".$row["details"]."</div>
            <br>";
            }

All I need is some way to pass a variable into the PHP code so I can use it for an if-statement around the query.

Help much appreciated!

Answer 1

You can achieve that using AJAX.

AJAX allows the communication of Javascript with PHP and vice versa which updates a part of webpage without refreshing the whole page. You could use AJAX with jQuery as well. It is pretty easy to setup.

Readup this documentation which has examples too: .ajax() | jQuery

Answer 2

Here your javascript code:

function switch2hecked() {
    if (document.getElementById("switch2").checked) {
        document.location = 'http://mydomain/api/data?switch2=1'
    }

And your PHP code:

        if ($_GET['switch2']) {
            $sql = "SELECT * FROM $table WHERE day = 'mon2' ORDER BY realtime";
        } else {
            $sql = "SELECT * FROM $table WHERE day = 'mon' ORDER BY realtime";
        }
        $result = mysqli_query($con, $sql);
        while($row = mysqli_fetch_array($result)) {             
            echo
            "<div class='dtime' >".$row["displaytime"]."</div>"
            ."<div class='name' >".$row["name"]."</div>"
            ."<div class='venue' >".$row["venue"]."</div>"
            ."<div class='address' >".'<a href="'.$row["loc"].'"target="_blank"> '.$row["address"].'</a>'."</div>"
            ."<div class='signup' >".$row["signup"]."</div>"
            ."<div class='email' >".'<a href="mailto:'.$row["email"].'"target="_blank"> '.$row["email"].' </a>'."</div>"
            ."<div class='details' >".$row["details"]."</div>
            <br>";
            }

Of course, if you want to have a more dynamic page you can use AJAX but it is a bit more complicated.

Answer 3

Jquery Ajax is the solution. Here is an example

function switch2hecked() {
     var toggle = document.getElementById("switch2").checked;
     $.ajax({
       type: "GET",
       url: "path/to/your/page.php",
       dataType: "json",
       data: { enabled: toggle }
     }).done(function( json ) {
       // Do the magic here...
       // the output of the php page will be in the json variable. 
     });
}

So your PHP page will be called with a GET param.

path/to/your/page.php?enabled=true

You will need to output the result of you query into a valid JSON string in the PHP page. Here is how you can do it:

if ($_GET['enabled']) {
    $sql = "SELECT * FROM $table WHERE day = 'mon2' ORDER BY realtime";
} else {
    $sql = "SELECT * FROM $table WHERE day = 'mon' ORDER BY realtime";
}
$result = mysqli_query($con, $sql);
echo json_encode($result);