使用 AJAX 加载查询 - Loading a query with AJAX

function showUser(str) {
if (str=="") {
document.getElementById("content").innerHTML="";
return;
} 
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("content").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","paginas.php?q="+str,true);
xmlhttp.send();
}

我从一个网站上得到了这个脚本，它与此相关

<?php
$q = htmlspecialchars($_GET['q']);
$con = mysqli_connect('localhost','root',NULL,'ttrpg');
if (!$con) {
  die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM content WHERE Pagina = '".$q."' ORDER BY ID ASC";
$result = mysqli_query($con,$sql);
while($row = mysqli_fetch_array($result)) {
  echo '<div class="container">';
  echo $row['Text'];
  echo "</div>";
}
echo "</table>";
mysqli_close($con);
?>

我也用了这个：

<body onload="showUser('Home')">

我没有更改函数的名称，因为没有必要我遇到的问题是，当我加载页面时，div 内没有任何显示。例如，当我按下链接时onclick="showUser('Apple')"div 中的文本确实会发生变化，但对于来自Home的文本，该文本永远不会消失，除非我重新加载页面

如果要

在页面加载时加载脚本，可以使用

 <script>
   showUser('Home');
 </script>

就在之前

 </body> or </html> /* it will also work at the end of all html codes.*/

如果您只想打印在 ajax 文件中执行的查询，那么您可以简单地使用

  echo $sql="SELECT * FROM content WHERE Pagina = '".$q."' ORDER BY ID ASC";

您还可以使用Firefox的Firebug或Chrome的开发人员工具使用Inspect Element查看整个Ajax标头，发送的参数和响应，然后转到NeWork，它将显示AJAX请求和响应。

此外，您可以在 ajax php 文件中使用 print_r($_REQUEST(。

编辑：我已经编写了代码来使用ajax满足您的需求。一旦页面从表内容中获取记录加载，这将调用主页内容。如果单击"关于"按钮，它将从内容表中获取"关于"页面的内容。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title></title>
    <meta name="" content="">
    <style>.msg{ color:#ff0000;}
    #contentloader{ background-color:#fff; border:1px solid #333; padding:10px; }
    </style>
    </head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>
    function ajaxContentLoad(page){
            q = {
                'page':page,
            }
            $.ajax({
                type:'post',
                data:q,
                url:'ajaxData.php',
                beforeSend: function(){
                    $("#msg").text("sending request to server...");
                },
                complete:function (){
                    $("#msg").text("request received and loaded");
                },
                success:function(result, textStatus, jqXHR) {                       
                    $("#contentloader").html(result);
                },
                error: function(jqXHR, textStatus, errorThrown){
                    alert(errorThrown);
                }
            })
}
$().ready(function(e){
    ajaxContentLoad('Home');
})
    </script>
    <body>
        <div style="padding: 20px; margin:20px auto; width:80%; background: #eee">
        <button id="btn1" value="Home" onclick="ajaxContentLoad('Home');">Home</button>
        <button id="btn1" value="About" onclick="ajaxContentLoad('About');">About</button>
        <p id="msg" class="msg"></p>
            <div id="contentloader">
                Content on page load
            </div>
        </div>
    </body>
    </html>

这是 ajaxData.php文件

    <?php
        $q = htmlspecialchars($_REQUEST['page']);
        $con = mysqli_connect('localhost','root',admin,'demo');
        if (!$con) {
          die('Could not connect: ' . mysqli_error($con));
        }
        mysqli_select_db($con,"demo");
        $sql="SELECT * FROM tbl_content WHERE page = '".$q."' ORDER BY ID ASC";
        $result = mysqli_query($con,$sql);
        while($row = mysqli_fetch_array($result)) {
          echo '<div class="container">';
          echo $row['content'];
          echo "</div>";
        }
    mysqli_close($con);