duanaoreng9355
2010-12-15 18:20
浏览 46
已采纳

如何将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.

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • doujuchuan9915 2010-12-15 22:05
    已采纳

    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);
    }
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题