Pass javascript string variable to another page and get the variable in PHP with AJAX-CodePudding

I basically don't seem to understand sending a variable to another page. I've tried PHP sessions, javascript cookies and ajax POST and GET. I'm trying to send the innerHTML of a div, with the data created by a jQuery call, a variable called savedartists. It displays correctly in the console.log on the sending page but the $_POST['savedArtists'] is undefined in the receiving page. I have spent hours looking at different posts on this site but I haven't been able to get it to work. Any help is appreciated.

<input  onClick="savequote();" type="button" id="savedchoices" value="Commander la prestation" >

<script>
function savequote() {
    var savedartists = document.getElementById('selectedList').innerHTML;
    console.log(savedartists);
    $.ajax({
        type: "POST",
        url: 'example.com/artiste/mise-en-relation/',
        data: { savedArtists : savedartists },
        success: function(data) {
            console.log("success!");
            location.href = "example.com/artiste/mise-en-relation/";
        }
    });
}
</script>

On the receiving page (example.com/artiste/mise-en-relation/)

<?php
if(isset($_POST['savedArtists']))
{
    $uid = $_POST['savedArtists'];
    echo $uid;
} else {
    echo 'zit!';
}
?>

Thanks for your time

CodePudding user response：

Capturing as an answer for future readers...

Fundamentally what's happening here is that two requests are being made to the target page. The first one is the AJAX request:

$.ajax({
    type: "POST",
    url: 'example.com/artiste/mise-en-relation/',
    data: { savedArtists : savedartists },
    success: function(data) {
        //...
    }
});

This is a POST request which contains the data you expect, and works just fine. However, the result of this request is being ignored. That result is available in the success callback, but the code doesn't do anything with it:

console.log("success!");
location.href = "example.com/artiste/mise-en-relation/";

Instead, what the code is doing is performing a redirect. This creates a second request to that same page (though it's essentially irrelevant that it's the same page). This is a GET request and contains no data to send to the server.

At its simplest, you should either use AJAX or redirect the user. Currently you're mixing both.

I want to redirect to the other page.

In that case AJAX is the wrong tool for the job. You may not even need JavaScript at all, unless you want to modify the elements/values of a form before submitting that form. But if all you want is to POST data to another page while directing the user to that page, a plain old HTML form does exactly that. For example:

<form method="POST" action="example.com/artiste/mise-en-relation/">
  <input type="text" name="savedArtists">
  <button type="submit">Submit</button>
</form>

In this case whatever value the user enters into the <input> will be included in the POST request to example.com/artiste/mise-en-relation/ when the user submits the form.