简体   繁体   中英

php not showing variable from AJAX

I am trying to post a variable from javascript to the same php page. Here is the code:

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
    </head>
    <body>

    <?php echo 'Result is '; if (isset($_GET['testing'])) { echo $_GET['testing']; } ?>
    <?php $thisPage = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; ?>

    <script>
      $(document).ready(function() {
        $('#testing123').on('change',function () {
            var testing = "confirmed";
            $.ajax({  
                type: "GET",  
                url: "<?php echo $thisPage; ?>",  
                data: testing,
                success: function() { $('#showresult').html("success"); } 
            })
        });
      });
    </script>

    <form>
      <select id="testing123">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </form>

    <div id="showresult"></div>

    </body>
</html>

I have also tried using POST but doesn't pick up in php. Also tried having a separate php file and using include_once() and still doesn't work.

Am I missing a file to load in?

The problem is that you are sending a string that is not a key-value pair. You can send a string (that is what happens behind the screens anyway) but it needs to be a valid query string consisting of key - value pairs that are correctly encoded.

It is easier to send an object and let jQuery take care of the encoding:

    $('#testing123').on('change',function () {
        var testing = "confirmed";
        $.ajax({  
            type: "GET",  
            url: "<?php echo $thisPage; ?>",  
            data: testing,
            success: function() { $('#showresult').html("success"); } 
        })
    });

Would become something like:

    $('#testing123').on('change',function () {
        // send key - value pairs
        var testing = {'testing': "confirmed"};
        $.ajax({  
            type: "GET",  
            url: "<?php echo $thisPage; ?>",  
            data: testing,
            success: function() { $('#showresult').html("success"); } 
        })
    });

Edit: To get the results of your php script back on your page, you need to use the variable that is passed to the success function:

...
success: function(output_from_php_script) {
            $('#showresult').text(output_from_php_script); 
         }

Also note that posting to the original page that generated the page in an ajax call, is not very convenient: It will return you loads of html (the whole page...) that you don't need.

You'd better write a separate script to process your ajax calls and have that return ( echo out...) only what you need.

  • Even when you happen to succeed with it, you won't really know whether the output was a success since the ajax request will be successful, but the outcome of your PHP might not be. This is probably not what you wanted.
  • You don't need to use absolute URL, simply use url: "page.php"

What I would suggest you to do is to create a separate php page that only contains <?php echo 'Result is '; if (isset($_GET['testing'])) { echo $_GET['testing']; } ?> <?php echo 'Result is '; if (isset($_GET['testing'])) { echo $_GET['testing']; } ?> <?php echo 'Result is '; if (isset($_GET['testing'])) { echo $_GET['testing']; } ?> and the call this page using ajax.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM