How to use jquery to handle a $GET method for viewing a xml file?

Question

I am using this question, jQuery Ajax POST example with PHP, to understand how to work with data inside a form before it is submitted.

I have an application without GUI, I build a database and a webapp around it. This application uses fopen() to open xml files. I am using the $GET method to get the xml file with its path from a column on the database.

<?php
$sql = pg_query($conn, "select link, identification from tbl_xml where date='$today';"));
?>
<form id="xmlform" name="xmlform" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="GET">
<?php
while ($row = pg_fetch_row($sql)) {
echo "<button type='submit' name='xml' value='$row[0]' class='btn-as-link'>$row[1]</button>"
}
?>
</form>

We are in the index.php.

[...]
ELSE IF( isset($_GET['xml'] )){
    include_once("showXml.php");
    }
[...]

showXml.php:

$url = filter_var($_GET['xml'], FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW|FILTER_FLAG_STRIP_HIGH);
[...]
// $url contains a really long path and the file. Each folder of the path creates exception on how to open the xml file, but in the end i simply open like this:
    // Opening the file
    $myfile = fopen("$xml", "r");
    $xml =  fread($myfile,filesize("$xml"));
    $dom = new DOMDocument;
    $dom->preserveWhiteSpace = TRUE;

    // IF the file has XML format we will arrange it, if not we will print it raw
    IF ( $dom->loadXML($xml) ) {
      $dom->formatOutput = TRUE;
      $xml_out = $dom->saveXML();
      echo "<pre><code class='language-markup'>";
      echo htmlspecialchars($xml_out);
      echo "</code></pre>";
    } ELSE {
      $xml = str_replace('\'','\''.PHP_EOL,$xml);
      echo "<pre><code class='language-markup'>";
      echo htmlspecialchars($xml);
      echo "</code></pre>";
    }

    fclose($myfile);

I wanted to use the $GET method because the webapp have a clock, every X minutes the page refreshes. If I would have used a $POST, I would have seen that window telling me to "resend the data". I don't want that.

The problem I face, is that the path is well visible in the URL, and because the webapp will receive an update soon where it will also open XML file presents in other servers, I am looking for a way to maintain the echo "<button type='submit' name='xml' value='$row[0]' class='btn-as-link'>$row[1]</button>" but converting the form from using $GET method, to a jquery/ajax or any other way to give to showXml.php its xml_file_path.

I added the code from the other question, and I can read the "Hooray, it worked!" on the console. My variable $xml is inside form.php.

form.php

if (isset($_POST['xml']){
    $xml = isset($_POST['xml']) ? $_POST['xml'] : null;
}

From here, it is not clear to me how to trigger the:

ELSE IF( isset($_GET['xml'] )){
    include_once("showXml.php");
    }

of the index.php, to open the variable $xml not from the $GET method rather from $POST used inside form.php

Answer 1

I'm not 100% convinced I have grasped the problem but if you were wanting to use ajax to send the request ( using GET ) perhaps the following might offer some guidance.

Rather than using a submit button a standard button works fine when using ajax - the details of the xml file are held within the buttons data-value attribute and sent as part of the ajax url.

Use the callback function to process the response however you need - this simply pops up an alert with the response data.

<?php
    $sql = pg_query( $conn, "select `link`, `identification` from `tbl_xml` where `date`='$today';"));
    $bttns = array();
    while( $row = pg_fetch_row( $sql ) )$bttns[]="<input type='button' data-value='{$row[0]}' value='{$row[1]}' />";



    echo "<!-- render basic form with all buttons -->
        <form name='xmlform'>
        " . implode( PHP_EOL, $bttns ) . "
        </form>";
?>




<script>
    var url='showxml.php';
    var evtcallback=function(xml){
        alert(xml)
    };

    function ajax( url, callback, payload ){
        var xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function(){
                if( this.status==200 && this.readyState==4 )callback.call( this, this.response );
            };
            xhr.open('GET', url + '?xml='+payload, true );
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            xhr.send(null);
    }

    var col=Array.prototype.slice.call( document.forms.xmlform.querySelectorAll('input[type="button"]') );
        col.forEach(function( bttn ){
            bttn.addEventListener('click', function(event){
                ajax.call( url, evtcallback, this.dataset.value );
            }.bind( bttn ),false );
        });
</script>

Answer 2

Not the best way, but it is working.

I converted the form to $_POST. Assigned the value of $_POST['xml'] to $_SESSION['xml'] and using this to open the file. Emptying the $_SESSION['xml'] after the file was opened. URL is clean.