Pass $_POST via javascript and redirect

Question

I have a page that takes the screen size of the user via Javascript and the other that receives the data for display. I just can’t pass the $_POST to another page, since it does not redirect.

Width.php

<script> 
var wi = screen.width;
$.post("Index-m.php", {screen: wi} );
window.location.replace("Index-m.php");
</script>`

Index-m.php

if(isset($_POST['screen'])){
    $resolution  = $_POST["screen"];
    if ( $resolution >= 768)
        echo "teste";
            else{
                if ( $resolution >= 480 and $resolution <= 767)
                    echo "teste 2";
                        else{
                            if ( $resolution <= 479)
                                echo "teste 3";
                            }
                }
    } else
echo 'oi';

OBS:I can’t go through $_GET because this resolution will be to load images or videos and solve the problem of responsive design in mobile version (Low speed).

Answer 1

You are using ajax (I believe), ajax is asynchronous, ie only works with "callbacks", if you redirect the page with location soon after calling ajax the redirect will abort the Ajax request.

Is this jQuery? If it’s the code it should look like this:

var wi = screen.width;
$.post("Index-m.php", { screen: wi }).done(function() {
    window.location.replace("Index-m.php");
}).fail(function() {
    alert("error");
});

There also seems to be a problem in your PHP, note that here you use the variable $resolution:

$resolution  = $_POST["screen"];

But here you use the variable $wi

if ( $wi>= 768)

Something else, use if and else without { and } requires a lot of attention with indentation and with the amount of line breaking, I recommend to always use it like this (if you have any error in the logic let me know):

if(isset($_POST['screen'])) {
    $resolution  = $_POST["screen"];
    if ($resolution >= 768) {
        echo "55";
    } else if ($resolution >= 480 && $resolution <= 767) {
        include "";
    } else if ( $resolution <= 479)
        include "";
    }
} else {
    echo 'oi';   
}

I don’t understand the use of include empty, but I will assume that you removed the file names only in the example.

Note that when sending a request by ajax and redirecting then the same content will not be displayed (will be two different requests), if you actually need to send a POST at the same time that redirects (ie just a request) you will have to use <form> instead of $.post, following example:

<form id="meuForm" action="Index-m.php" method="POST">
    <input name="screen" id="screen" type="hidden">
</form>

<script>
function testCase() {
    var screenField = document.getElementById("screen");
    var meuForm = document.getElementById("meuForm");

    screenField.value = screen.width;
    meuForm.submit();
}
</script>

<button onclick="testCase()">Testar</button>

In the example I used a button, but if you need to "automate", you can use onload:

<form id="meuForm" action="Index-m.php" method="POST">
    <input name="screen" id="screen" type="hidden">
</form>

<script>
window.onload = function() {
    var screenField = document.getElementById("screen");
    var meuForm = document.getElementById("meuForm");

    screenField.value = screen.width;
    meuForm.submit();
};
</script>

or $.ready (jQuery):

<form id="meuForm" action="Index-m.php" method="POST">
    <input name="screen" id="screen" type="hidden">
</form>

<script>
$.ready(function() {
    var screenField = document.getElementById("screen");
    var meuForm = document.getElementById("meuForm");

    screenField.value = screen.width;
    meuForm.submit();
});
</script>