如何将PHP函数结果放在特定的<div>中？我正在使用AJAX

问题描述：

I have implemented a dynamic creation of a HTML table using AJAX.

Here's what I've created:

index.php

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <script type="text/javascript" src="ContactController.js">
    </script>
</head>

<body>

    <div class="main-wrapper">

        <div id="menu">
            <a href="javascript:void(0)" onclick="getAllContacts()">
                Go to contacts
            </a>
        </div>

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

    </div>

</body>

</html>

ContactsController.js

function getAllContacts() {

    // Manage new XmlHttpObject creation
    xmlHttp = GetXmlHttpObject();
    if (xmlHttp == null) {
        alert ("Your browser is out of date. Please upgrade.");
        return;
    }

    var url = "getAllContacts.php";

    // Workaround for page caching
    url = url + "?sid=" + Math.round(Math.random() * 1000000000);

    xmlHttp.open("POST", url, true);

    // Manage XmlHttpObject state change
    xmlHttp.onreadystatechange = stateChanged;

    xmlHttp.send(null);
}

function stateChanged() {

    // Check if the XmlHttp request is complete
    if (xmlHttp.readyState == 4) {

        // Set the XmlHttp response in the contacts div
        document.getElementById("main-content").innerHTML = xmlHttp.responseText;
    }
}

// Creates a new XmlHttpObject
function GetXmlHttpObject() {

    var xmlHttp = null;

    try {
        // XmlHttpObject constructor for Chrome, Firefox, Opera, Safari
        xmlHttp = new XMLHttpRequest();
    } catch (e) {
        // XmlHttpObject constructor for Internet Explorer > v6.0
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            // XmlHttpObject constructor for Internet Explorer > v5.5
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlHttp;
}

getAllContacts.php

<?php

include 'connectToMySQL.php';

$command = "SELECT * FROM contact";
$result = mysql_query($command);

echo "<table id='contactsTable' border='1'>";

// Table headers
echo "<tr>
          <th>Name</th>
      </tr>";

// Print all contacts
while($row = mysql_fetch_array($result)) {
    echo "<tr>";
    echo "<td>
              <a href='#'
                 onclick=\"getContact('" . $row['DisplayName'] . "')\">"
                  . $row['DisplayName'] .
             "</a>
          </td>";
    echo "</tr>";
}

echo "</table>";

mysql_close();

?>

So, clicking on a Go to contacts link activates a getAllContacts javascript function. That function calls getAllContacts php function which retrieves the data from MySQL database and places it in the contactsTable table.

What I need is to tell the function to place that table in the main-content div located in the index.php page. How do I achieve this? Thanks.

答

ok, so going from your comment about wanting two different possible target divs, just define your onreadystatechanged event inline and use a local variable to refer to the div...

function getAllContacts() {

    // Manage new XmlHttpObject creation
    var xmlHttp = GetXmlHttpObject(); // MAKE THIS LOCAL INSTEAD OF GLOBAL!
    if (xmlHttp == null) {
        alert ("Your browser is out of date. Please upgrade.");
        return;
    }

    var url = "getAllContacts.php";

    // Workaround for page caching
    url = url + "?sid=" + Math.round(Math.random() * 1000000000);

    xmlHttp.open("POST", url, true);

    var targetDiv = document.getElementById(whateverIdYouWant);

    // Manage XmlHttpObject state change
    xmlHttp.onreadystatechange = function(){
        // Check if the XmlHttp request is complete
        if (xmlHttp.readyState == 4) {

            // Set the XmlHttp response in the contacts div
            targetDiv.innerHTML = xmlHttp.responseText;
        }
    }

    xmlHttp.send(null);
}

如何将PHP函数结果放在特定的中？ 我正在使用AJAX

相关推荐

如何将PHP函数结果放在特定的
中？我正在使用AJAX