Ajax not redirecting me to next page

问题

I am trying to pass the ID of the clicked image to next page. When I developed my code, it didn't redirect me to the next page. When I click F12 and check the POST in network, it shows that the variable is passed correctly to the next page as shown in the attached image but it didn't redirect me to the next page. So now I know that the variable is passed and received correctly in the next page but I need what needed in my code to direct me to the next page, Note: when I tried to put window.location.href = 'userevent.php'; it redirect me but without the variable and gives me error (Notice: Undefined index: clicked in) Also when I use url: '@userevent.php.Action("delivery", "service")',, it gives me network status 403 this is my code:

  <?php
    session_start();

    require "init.php";
    login();
?>


<html>
<!--...-->
    <head>
        <meta charset="utf-8">
        <title> Ghost </title>
    <!--    <link rel="Stylesheet" href="css/style1.css">-->

    <link rel="stylesheet" href="css/style2.css" media="screen" type="text/css" />
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script >


function myFunction(clicked) {
  document.getElementById('test').innerHTML = clicked;

  $.ajax({
     type: "POST",
     //url: '@userevent.php.Action("delivery", "service")', 
     url: 'userevent.php', 
     dataType:'json', 
     data: {"clicked": clicked},
     success: function(data){
     }
});
window.location.href = 'userevent.php';
}
</script>
    </head>

    <body>  

    <div class="sidenav">   
   <a href="#Main Page">Main Page</a>
  <a href="#About Us">About Us</a>

</div>



<div class="login-box">
  <h1>Add Event</h1>
  <div>
  <p id="test"> </p>

<?php
// LOGIN USER
function login(){
    global $con;
    global $counter;
echo "<table  align='center'  >";
    //$email = $mysqli->escape_string('');
    $query="SELECT * FROM events ORDER BY ID ASC";
    $result=mysqli_query($con,$query);
    if ( $result->num_rows == 0 ) // User doesn't exist
        echo "User with that ID doesn't exist!";
    else { // User exists
     $counter = 0;
     $emptyArray = [];


while($row = $result->fetch_assoc()) 
   {
       $emptyArray[$counter]= $row["ID"];
       if($counter == 0)
       {
           echo '<tr>';
       }
       echo '<td><img id=' . $row["ID"]. ' onClick="myFunction(this.id)" src="images/' . $row["photo"]. '" width="250px"  height= "250px" alt="Avatar" >
        <h1 id = "GFG_DOWN" style =  
            "color:white;text-align:center; font-size: 20px; font-weight: bold;"> '.$emptyArray[$counter].'
        </h1> </td>';
       $counter++;
       if($counter == 3)
       {
            echo "</tr>";
            $counter = 0;
       }
  }
    }
}

mysqli_close($con);
?>

and this is the code in the second page:

<div class='textbox'>
    <label> ID: ".$_POST['clicked']."</label>
  </div>

回答1:

The entire point of Ajax is that that request is made with JavaScript and the response is handled by JavaScript without navigating to a new page.

If you want to make a POST request and navigate to the resulting page, then use a <form>

window.location.href = 'userevent.php';
it redirect me but without the variable

Assigning a URL to location.href triggers browser navigation (with a GET request) to that URL.

It is a completely different request to the Ajax request so it doesn't have the data from that request.

Again: Use a form for this.

I read the data from database and I get the clicked id of the images.

Put the data you want to send in a submit button instead.

<form method="POST" action="userevent.php">
    <?php while($row = $result->fetch_assoc())  ?>
        <button name="clicked" value="<?php echo htmlspecialchars($row["ID"]); ?>">
            <img src="images/<?php echo htmlspecialchars($row["photo"]); ?> alt="Put useful and unique alt text so people know what they are selecting if they can't see the image">
        </button>
    <?php } ?>
 </form>

回答2:

I think you are better off making a small form, since you want to send the user to a new page when clicking.

<?php while($row = $result->fetch_assoc())  ?>
    <form action="userevent.php" method="POST">
        <input type="hidden" name="clicked" value="$row["ID"]">
        <img src="images/{{ $row['photo'] }}" class="img">
    </form>
<?php } ?>
$('.img').click(function() {
    this.form.submit();
});

*Edited to reflect your current edits.

来源：https://stackoverflow.com/questions/62216098/ajax-not-redirecting-me-to-next-page

标签

php

jquery

ajax