使用jQuery / AJAX在用户单击事件上运行php脚本

Question

I've got a php script that I need to run using jQuery/AJAX when a user clicks a button. I have a jQuery script that is supposed to fire when the user clicks the button. However, the event isn't actually firing. Can anyone assist me?

instructor.php

<div id="instructor">
    <?php
        echo "<img id=instructor_image src=" .$_SESSION["image"] .">";
        echo "<h1>" .$_SESSION["user"] ."</h1>";
        echo "<span><p>" .$_SESSION["program"] ."</p> - <h2>" .$_SESSION["role"] ."</h2></span>";
        echo "<a href=mailto:" .$_SESSION["email"] .">" .$_SESSION["email"] ."</a>";
    ?>
    <button class="button" name="logout" id="logout">Logout</button>
</div>

script.js

$(document).ready(function(){
    $("#logout").on("click", function(){
        ajax = new XMLHttpRequest();
        ajax.open("../php/logout.php", "POST", true);
        ajax.send();
    })
})

logout.php

<?php
    require("../includes/header.php");

    $loggedout = "UPDATE `$user_table` SET `logged_in`=0 WHERE `user_id`='$user_id'";
    mysqli_query($connect, $loggedout);
    session_unset();
    session_destroy();
    mysqli_close($connect);
    header("Location: ../pages/logged_out.php");
?>

The session is started in the header and yes, the header is called on every page. I am also getting the following error on the ajax.open() line. NS_ERROR_ILLEGAL_VALUE:

Answer 1

there is something that is weird - header("Location: ../pages/logged_out.php"); do you want to do redirect after user click? if so you should do it in your js.

i would change

$(document).ready(function(){
    $("#logout").on("click", function(){
        $.post("../php/logout.php",{},function(response){
            if(response.success == "1"){
                location.replace("../pages/logged_out.php");
            } else {
                //handle error
            }
        },'json');
    })
})

and php:

<?php
    ob_start();
    require("../includes/header.php");
    ob_clean();
    $loggedout = "UPDATE `$user_table` SET `logged_in`=0 WHERE `user_id`='$user_id'";
    mysqli_query($connect, $loggedout);
    session_unset();
    session_destroy();
    mysqli_close($connect);
    echo json_encode(array('success'=>1));
?>

Answer 2

Because

ajax.open("../php/logout.php", "POST", true);

is wrong. It is .open(method, url, async) .

 void open( DOMString method, DOMString url, optional boolean async, optional DOMString user, optional DOMString password ); 

So change the code to

$("#logout").on("click", function(){
    ajax = new XMLHttpRequest();
    ajax.open("POST", "../php/logout.php", true);
    ajax.onreadystatechange = function () {
        if (xmlhttp.readyState==4) console.log("done");
    }
    ajax.send();
});

and since you are using jQuery, you can just do

$("#logout").on("click", function(){
    $.post("../php/logout.php", function() { console.log("done") } );
});