How do I display a PHP script as html page after calling it using AJAX?-CodePudding

I am trying to call a php file, which will display a html page, using AJAX from my js. This is my php file:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snippet details</title>
</head>
<body>
    <?php
        error_reporting(E_ALL);
        ini_set('display_errors', 1);
        header('Access-Control-Allow-Origin: *');
        header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
    
        require "../server_detail.php";
    
        $con=mysqli_connect($server,$username,$pass);
        $connection=mysqli_select_db($con,$database);
    
        if(!$connection)
            echo "Connection to database failed! Please try again";
        else{
            $sql="SELECT `Snapshot` FROM `snippet` WHERE `Date`='".$_POST["date"].
                "' AND `newspaper`='".$_POST["newspaper"]."' AND `Subject_desc`='".$_POST["news_desc"]."'";

            $result = $con->query($sql);
            $temp=explode('.',$result->fetch_array()[0]);

            echo "<div style=
             'text-align:center; vertical-align: middle;
             background-color: #FFFFFF; margin: 0 auto !important; 
             min-height: 100%; padding: 0; width: 978px !important; overflow:auto;'>";

            echo "<h3>{$_POST['newspaper']}</h3>";
            if($temp[count($temp)-1]=="pdf" || $temp[count($temp)-1]=="PDF")
                echo "<iframe src='{$result->fetch_array()[0]}' height='200px'>";
            else
                echo "<img src='{$result->fetch_array()[0]}' height='200px'>";
            echo "<p>{$_POST["news_desc"]}</p>";
            echo "</div>";
        }
        $con->close();
    ?>
</body>
</html>

I am trying to call this script from my js (when a li is pressed):

document.querySelector('body').addEventListener('click', function(event) {
      if (event.target.tagName.toLowerCase() === 'li') {
        var str=event.target.innerText.split('-');
        $.ajax({
            url: '/all_backend_stuff/view_page.php',
            type: 'POST',
            data:{
                "date":document.getElementById("date").value,
                "newspaper":str[0],
                "news_desc":str[1]
            },
            success:function(response){
                window.open('/all_backend_stuff/view_page.php'); //shows that all my array keys are undefined 
            },
            complete:function(){}
        });
      }
});

My POST variables are showing as undefined. Why is that?

CodePudding user response：

Different ways of accessing URLs behave differently.

If you use <a href="..."> then the browser will load the data from the URL and display it as a new page.

If you use <img src="..."> then the browser load the data from the URL and display the image inline at that point in the current page.

If you use <iframe src="..."> then the browser will load the data from the URL display the page in a box in the current page.

If you use Ajax then the browser will load the data from the URL and make it available to JavaScript.

That is the point of Ajax.

It doesn't display the result as a new page because Ajax is designed to not do that.

If you want to display the result as a new page then the best thing to do is not use Ajax. Use a regular <form> submission instead.

If you insist on using Ajax then you need to process the data that you ~~are currently~~ were, before you edited the question, logging and change the DOM of the current page using it. Generally, when you do this you will want to request a URL, with Ajax, that returns structured data (e.g. in JSON format) and then selectively update parts of the page instead of loading a whole new HTML document.

CodePudding user response：

HTML Forms:

<form action="/action_page.php">
    <label for="fname">Date : </label><br>
    <input type="text" id="date" name="date" value="John">
    <br>
    <label for="lname">Newspaper</label><br>
    <input type="text" id="newspaper" name="lname" value="Doe"><br>
    <br>
    <li><input type="submit" value="Submit"></li>
</form>

<p>If you click the "Submit" button, the form-data
    will be sent to a page called "/action_page.php".
</p>

</body>
</html>

My idea is that you dynamically change the field attributes with JavaScript and send them to a new PHP.