在第二个 php 文件（通过 jQuery load()）中更改后，如何确保 index.php 中的 PHP 变量可用？

Question

In my index.php I have the following jQuery code for responding to clicking an image:

<script>
    $(document).on('click',".i-give-up", function() {
        $("#take-a-guess").load("get_snippet.php");

        [...snip...]

        generate_HSK2_circle(<?php echo $answer_data["HSK2level"]; ?>);
    });
</script>

When I click the image, it loads get_snippet.php which performs and processes a MySQL query. Moreover, if I add

echo "<script>console.log('get_snippet[new] HSK2 level: " . $answer_data["HSK2level"] . "' );</script>";

to the end of get_snippet.php , I can see the correct variable for $answer_data["HSK2level"] in get_snippet.php .

The problem is that the variable $answer_data["HSK2level"] in index.php does not change as a result of loading get_snippet.php .

Question : How do I ensure a PHP variable is available in index.php after being changed in a second php file (via a jQuery load())?

Answer 1

The index.php file is not going to change after it is already rendered, unless PHP is processed on the server.

In order to pass this data, you may want to look into using a query string and redirecting back to index.php with a get variable.

https://www.php.net/manual/en/reserved.variables.get

Then in your get_snippet.php , you would direct to index.php?answer=... and retrieve it via htmlspecialchars($_GET["answer"])

Answer 2

It seems to me that you are actually wanting to store the php value of $answer_data["HSK2level"] in a javascript variable so each time you call generate_HSK2_circle() you pass in the most current value

Note that ajax is asynchronous also so you need to use a complete callback before proceeding with new data

To do that your js would look like:

<script>
    // new js variable recieves value on page load from php
    var answer_data = <?php echo $answer_data["HSK2level"]; ?>;

    $(document).on('click',".i-give-up", function() {
        // use complete callback of load to assure new data loaded
        $("#take-a-guess").load("get_snippet.php", function(){
          // new data has loaded
          [...snip...]
          // use the js variable in function call
          generate_HSK2_circle(answer_data);
        });

       
    });
</script>

Then in your new script tag (from load) update that js variable value

echo "<script>answer_data=". $answer_data['HSK2level']. "</script>";

If this new script tag is the only data being sent from server in load() a more appropriate approach would be to send json and use $.getJSON and manually update the js variable from the response object