Question

我有一张表格：

<button type="button" name="viewRecords" id="viewRecords" class="activeButton" onClick= 
  "<?php include ("") ?>"

我希望在单击按钮时使用外部PHP文件中的内容填充div。

<div id="admin-content">
<?php include ("view-records.php");?>
</div>

有办法做到这一点吗？

Answer 1

没有办法直接使用PHP，因为PHP在生成页面时运行，而不是响应用户界面事件（除非您当然加载新页面）。

阅读Ajax并使事情变得更简单，使用jQuery，尽管其他库也可用。

e.g。与jquery / Ajax一样简单

// Javascript

function success(data) {
    // Assuming you return raw HTML from the ajax call...
    $('#admin-content').html(data); // inserts the html into the div.
}

$.ajax({
  url: url,
  data: data, // URLencoded query string (google encodeURIComponent() if you don't know this)
  success: success,
  dataType: 'html'
});

了解详情：http://api.jquery.com/jquery.get/

Answer 2

您可以使用jQuery的.post方法来实现此目的。确保在网页的头部包含jQuery。

   $("#viewRecords").click(function() {
     $.post( "view-records.php", function( data ) {
        $( "#admin-content" ).html( data );
     });
   });

有关JQuery .load方法here的更多信息。

Answer 3

或者，如果您想避免使用其他人提供的jQuery解决方案（也非常好），那么您可以在纯JavaScript中实现相同的结果（只需将此代码放在<head>中的某个位置即可标记）：

<script type="text/javascript">
    function viewRecords() {
        var xmlhttp;
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("admin-content").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET", "view-records.php", true);
        xmlhttp.send();
    }
</script>

然后在按钮的onClick处理程序上调用该函数：

<button type="button" name="viewRecords" id="viewRecords" class="activeButton" onClick="viewRecords();" value="View Records" />

如何通过onclick事件将外部PHP页面中的内容包含到DIV中？

3 个答案: