无法将带有html的php echoed数据提取到responseText中，返回到ajax表单

Question

Can anybody help me with this problem please. I've been researching for days and I can't make the php echoed array containing html code to be formatted for the responseText of javascript. I've tried to format the echoed array with json_encode($array) but doesn't work. I've tried responseText.split(" ") and then used a for loop to extract the html code inside the array but I can't either. I know the javascript code is working because I manually inserted html code like this: i.e

responseText = '<p><img src="img/moon.png">here is your image</p>'

This works perfect.But when php spits out the array all I see on the screen with the code you see below is the Array word. I know my php code is also working because I tested it before sending the text using POST method.

Your help is appreciated.

My ajax to php

<script>
    function ajaxObj( meth, url ) {

    var x = new XMLHttpRequest();

    x.open( meth, url, true );

    x.setRequestHeader("Content-type", "application/x-www-form-    urlencoded");

        return x;

    }

function ajaxReturn(x){

    if(x.readyState == 4 && x.status == 200){

    return true;

    }

}



</script>

<script>

function gotext(){

      var mm = document.getElementById("todotext").value;

      var isTr=false;

      var ajaxfile = ajaxObj("POST", "env.php");

      ajaxfile.onreadystatechange = function() {


         if(ajaxReturn(ajaxfile) == true) {


               document.getElementById("outputimgs").innerHTML = ajaxfile.responseText;


                 }

           }



    ajaxfile.send("todotext="+mm);
}



$(document).ready(function(){
$('form[name=uturn]').on('submit', function(e) {
     e.preventDefault();
     gotext();
    $('html, body').animate({
         scrollTop: $("#first").offset().top
    }, 1000);
    return false;
    });
});
</script>

This is the html form

<form name="uturn" action="process.php" method="post">

<textarea id="todotext" name="text" placeholder="type or paste words here"></textarea><br/>


<input type="submit" id="arefbut" class="button scrolly" value="Convert"/>

</form>



        <!-- First -->


            <section id="first" class="main">


<div class="container">
                        <h2>Done !!</h2>
                <p id="outputimgs">end</p>
</div>

This is the dynamic construction of html in php

if(isset($_POST['todotext'])) {

$chunk = $_POST['todotext']; 

$commentArray = explode(" ",$chunk);


.
.
.

$commentArray[$i]='<p class="pos"><img src="imgs/blank.png" width="40" height="40"><br>
                                           '.$commentArray[$i].'</p>';


$together = implode(" ",$commentArray);    

echo $together;

Answer 1

All, I found where the problem was. Like I said the only thing coming to the web page was the word Array; that output was coming from the str_replace, which was later changed into $commentArray[$i] in the middle of the html code to be echoed out to responseText. I had to add this for loop to fix it. I don't know off a better way to do it. The rest of the html was ignored and to fix this I added the html_entity_decode function. The final code looks like below. All is working perfect now.

See here the for loop added

if(isset($_POST['todotext'])) {

$chunk = $_POST['todotext']; 

$text = explode(" ",$chunk);

$delimiter = array(" ",",",".","'","\"","|","\\","/",";",":","?",">","<","~","_","-","=","+","*","!","@","#","$","%","^","&","(",")");
$replace = str_replace($delimiter, $delimiter[0], $text);

for ($i=0; $i<count($replace); $i++)
{
if ($replace[$i]!==' ')
{
$newreplace .= $replace[$i].' ';
}
}

$newreplace = preg_replace('/\s+/', ' ', $newreplace );


$commentArray= explode($delimiter[0], $newreplace);

Here is the new treatment to $commentArray

for ( $i=0; $i<$counter;$i++)
{


    $commentArray[$i]= html_entity_decode('<p class="pos"><img src="imgs/black.png" width="40" height="40"><br>'.$commentArray[$i].'</p>');

    }

    $together = implode(" ",$commentArray);

    echo $together;
}