如何在ajax中的innerHTML中嵌入或包含php文件？

I want to display the contents of the php file and I tried to include the php file in ajax but it doesn't work.

solution 1 doesn't work

document.getElementById("txtMeaning").innerHTML = "<center><img src='images/img_layout/exploro_logo.png'><?php include 'word.php' ?></center>";

solution 2 still doesn't work

document.getElementById("txtMeaning").innerHTML = "<center><img src='images/img_layout/exploro_logo.png'<script type='text/javascript' src='wotd.php'></script>";

Here's the code for ajax if there's no input it will display the word of the day

function showMeaning(word)
{ 
    if(word.length == 0)
    {
         document.getElementById("txtMeaning").innerHTML = "<center><img src='images/img_layout/exploro_logo.png'><?php include 'word.php' ?></center>";

//the word of the day must be displayed here but it doesn't work

        return false;
    }

    else{
            xmlHttp=GetXmlHttpObject()
            if (xmlHttp==null)
            {
                alert ("Browser does not support HTTP Request")
                return
            }
            var url = "get_word.php"
            url = url + "?word=" + word
            xmlHttp.onreadystatechange=stateChanged 
            xmlHttp.open("GET",url,true)
            xmlHttp.send(null)
    }       

}

here's my php code for generating the word of the day

<?php
        $con=mysql_connect("localhost","root","");
        mysql_set_charset("UTF8", $con);                                            

        if(!$con)
            {
                die("Could not connect." .mysql_error());
            }

        mysql_select_db("dictionary_ajax", $con);


        $query = "SELECT eng_word" . 

                 " FROM english".

                 " ORDER BY RAND(DAY(NOW())) LIMIT 1";

        $result = mysql_query($query) or die(mysql_error()); 

        $num_rows = mysql_num_rows($result);                                                    

        if($num_rows==0)
        {
            echo "No Results Found. Please try again";
        }

        while($row=mysql_fetch_array($result))
        {
            echo "<center><div class='wotd'>Word of the day:</div><div class='word'>".$row['eng_word']."</div></center>";

        }
        mysql_close($con);
?> 

Using jQuery, you could you use one of their ajax calls to load your html from include.php.

<div id="content"></div>

<script>
$(document).ready(function() {
  $("#content").load("/yourpath/include.php");
});
</script>

or, without using jQuery, you may try this,

 <div id ="content"></div>

 <script>
 function loadphpfile() {
   var x = document.getElementById("content");
   x.innerHTML = '<?php include_once "include.php";?>';
 }      
 loadphpfile();    
 </script>

A better approach would be to call the php file via an AJAX request and then append the response to the relevant DOM element.

Overview of AJAX using vanilla Javascript: https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started

Docs on JQuery Post and Get short cuts. https://api.jquery.com/jquery.get/ http://api.jquery.com/jquery.post/

There are examples of what you are trying to do in the JQuery .get docs

You should make an AJAX call to get HTML from your server, then put the response to a DOM element with JavaScript.

So, in your case this may look like:

<center>
    <img src="images/img_layout/exploro_logo.png">
    <div id="wordOfTheDay"></div>
</center>
<script type="text/javascript">
    /**
    * Gets a word of the day
    */
    function getWordOfTheDay() {
        //Makes AJAX call
        var xhttp;
        xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            //Adds the response to the DOM element with ID wordOfTheDay
            document.getElementById("wordOfTheDay").innerHTML = xhttp.responseText;
            }
         };
         xhttp.open("GET", "word.php", true);
         xhttp.send();
    }
    //Invoke the function to get the word of the day
    getWordOfTheDay();
</script>

With a popular framework like jQuery, this may look like this:

<center>
    <img src="images/img_layout/exploro_logo.png">
    <div id="wordOfTheDay"></div>
</center>
<script type="text/javascript">
    /**
    * Gets a word of the day
    */
    function getWordOfTheDay() {
        //Makes AJAX call
        $.get("word.php", function (response) {
            $('#wordOfTheDay').html(response);
        });
    }
    //Invoke the function to get the word of the day
    getWordOfTheDay();
</script>

More examples of using AJAX here - http://www.w3schools.com/ajax/ajax_examples.asp

More info about jQuery get method - https://api.jquery.com/jquery.get/

Also there are very good explanations of AJAX on stackoverflow here - How does AJAX work?

Try isolating the html+js files and API call yout .php file

app |-- www/index.html
    |-- www/js/main.js 
    |-- www/api/word.php

1. Create html for view and include your javascript file and the jQuery library.
2. Get your data from the php file and return a json file
3. Call the *.php api file url using $.ajax Read more
4. Update DOM from the ajax data object

Hope that helps