Load and display HTML first before PHP

2019-09-05 01:24发布

问题:

I have 2 php files(index.php and lelong.php). I am trying to load the html first in the index.php (table) and display the word(Calculating...) on the second column while the lelong.php extracting the data from the website before outputting them.

Is there a way to do that? I heard of using JS or AJAX but not really sure how to do it.

Index.php

<!DOCTYPE html>
<html>
<head>
<?php include 'lelong.php'; ?>
</head>

<body>
<table border ="1" style = "width:50%">
    <tr>
        <td>E-Commerce Website</td>
         <td>No. of Products </td>
    </tr>
    <tr>
        <td>Lelong</a></td>
        <td><?php echo $lelong; ?></td>
    </tr>
</table>    

<body>

lelong.php

<?php
$grep = new DoMDocument();
@$grep->loadHTMLFile("http://www.lelong.com.my/Auc/List/BrowseAll.asp");
$finder = new DomXPath($grep);
$class = "CatLevel1";
$nodes = $finder->query("//*[contains(@class, '$class')]");

$total_L = 0;
foreach ($nodes as $node) {
    $span = $node->childNodes;
    $search = array(0,1,2,3,4,5,6,7,8,9);
    $number = str_replace($search, '', $span->item(1)->nodeValue);
    $number = preg_replace("/[^0-9]/", '', $span->item(1)->nodeValue);

    $total_L += (int) $number;  
}   
    $lelong = number_format( $total_L , 0 , '.' , ',' );

?>

Thanks

回答1:

Assuming lelong.php is already working fine, yes you could use ajax to get the result:

Basic example:

So in your HTML:

<table border ="1" style = "width:50%">
    <tr>
        <td>E-Commerce Website</td>
         <td>No. of Products </td>
    </tr>
    <tr>
        <td>Lelong</a></td>
        <td class="result_data">Calculating ...</td><!-- initial content. Loading ... -->
    </tr>
</table>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(document).ready(function(){

    // use ajax, call the PHP
    $.ajax({
        url: 'lelong.php', // path of lelong
        success: function(response){
            $('.result_data').text(response);
        }
    })
});
</script>

Then in your PHP:

<?php

$grep = new DoMDocument();
@$grep->loadHTMLFile("http://www.lelong.com.my/Auc/List/BrowseAll.asp");
$finder = new DomXPath($grep);
$class = "CatLevel1";
$nodes = $finder->query("//*[contains(@class, '$class')]");

$total_L = 0;
foreach ($nodes as $node) {
    $span = $node->childNodes;
    $search = array(0,1,2,3,4,5,6,7,8,9);
    $number = str_replace($search, '', $span->item(1)->nodeValue);
    $number = preg_replace("/[^0-9]/", '', $span->item(1)->nodeValue);

    $total_L += (int) $number;  
}

$lelong = number_format( $total_L , 0 , '.' , ',' );

echo $lelong; // output lelong
exit;

?>

The effects on the front are yours to control. You could use plugins for that.



回答2:

In your lelong.php page, Add a line echo $lelong; At the end.

In your index.php, remove <?php include 'lelong.php'; ?>, and import JQuery library. For example <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

Replace <td><?php echo $lelong; ?></td> by <td id='lelong'>Calculating...</td>

Add jquery code <script>$('#lelong').load('lelong.php');</script>

It's better for you to learn jQuery first.