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

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，尽管可以使用其他库。

例如与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方法的更多信息，请参见此处。

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" />

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

问题描述

3 个解决方案

解决方案1
2 2015-01-22 11:17:01

解决方案2
0 2015-01-22 11:18:31

解决方案3
0 2015-01-22 11:29:09

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

问题描述

3 个解决方案

解决方案1 2 2015-01-22 11:17:01

解决方案2 0 2015-01-22 11:18:31

解决方案3 0 2015-01-22 11:29:09

解决方案1
2 2015-01-22 11:17:01

解决方案2
0 2015-01-22 11:18:31

解决方案3
0 2015-01-22 11:29:09