如何在不同的html div中的php文件上显示不同的回声

Question

I have 2 files: html and php. HTML file send variables to php via javascript. PHP call perl file to 1- process the data. 2- Then present the result in some <table><tr><td> .

I want in html 1- display the processing statement in some div. //This done successfuly 2- display the result in another div. //How to do it?

javascript function
{
   var url = "file.php";
   var params = //some parameters;
   var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function() 
{
    if (xhttp.readyState == 4 && xhttp.status == 200){
    document.getElementById("ProcessingDiv").innerHTML = xhttp.responseText;     //This div show text about processing the data.

    document.getElementById("ResultDiv").innerHTML = //How to do this?
                }
        };
       xhttp.open("POST", url, true);
       xhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
       xhttp.send(params);
    }

some code of PHP file:

// some echo "processing data statement" here are displayed in ProcessingDiv

// statement which execute perl is here (the process takes 10 min and generate some files)

//I want below echos to displayed in ResultDiv

if(!file_exists($filename)) {
    echo "<p>No comparison meets cutoff criterion. </p>";
    }else {
    echo "<p><table border = 1 width=100% class='sortable'>";
    echo "<thead><tr><th>Query</th><th>Subject</th><th>Score</th</tr>  </thead>";
    echo "<tbody>";
    if($i == 0) {
        echo "<tr><td>$element[1]</td><td><input type='checkbox'>$target_name</td><td>$element[3]</td><td>$element[4]</td></tr>";
    }else{
                  //another echo
    }

Is that possible to display php echos in two different div?

Note: My system behaviour:

1. The browser load the HTML file which takes input from the user and send form inputs to php file by click some button.

2. When the button is clicked It displays all the echos in php "before calling perl file" in ProcessingDiv. But after excuting the perl, How do display other echos in another div?

Note I try using:

jQuery.ajax({
       type: "POST",
        url: "blastresult.php",
        data:params,
        dataType: "html",
        success: function(data)
        {
            jQuery('#result').html(data);

        }
    });

And it do the same job. Presenting echoes before perl execution.

Hope you getting my point. Any help is highly appreciated. Thanks,

Answer 1

Use Ajax to display php echo on your html page:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<script type="text/javascript">
function displayOutput()
{
    var dataString = "name=abc&gender=male";
    $.ajax({
        type: "POST",
        url: "file.php",
        data: dataString,
        dataType: "html",
        success: function(data)
        {
            $('#myDiv').html(data);

        }
    });

}

</script>

Answer 2

I solve the problem by seplit the response text:

var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function() 
{
    if (xhttp.readyState == 4 && xhttp.status == 200){
    var parts = xhttp.responseText.split("--seperator---");
    document.getElementById("ProcessingDiv").innerHTML = parts[0];
    document.getElementById("ResultDiv").innerHTML = parts[1];
                }

Thanks everyone.