Question

我正在尝试查询数据库，但我不希望它在页面加载时执行此操作。我希望它在执行javascript函数时进行查询。我该怎么做呢？以下是我的代码。我试过在函数中间添加php标签并调用 loadAvailableReservations（）但是即使关闭脚本标签也会返回错误。

<?php
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "fbla";

function loadAvailableReservations() {
    $conn = new mysqli($servername, $username, $password, $dbname);
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }

    $sql = "SELECT id, name, date FROM availableReservations";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        // output data of each row
        while($row = $result->fetch_assoc()) {
            echo "<br> id: ". $row["id"]. " - Name: ". $row["name"]. " " . $row["date"] . "<br>";
        }
    } else {
        echo "0 results";
    }
    $conn->close();
}
?>


<html>
    </head>
        <meta name="viewport" content="width=device-width">
        <script src="http://code.jquery.com/jquery-1.7.js"></script>
        <link rel="stylesheet" media='screen and (min-width: 0px) and (max-width: 298px)' href="css/unsuported.css" />
        <link rel="stylesheet" media='screen and (min-width: 298px) and (max-width: 552px)' href="css/small.css" />
        <link rel='stylesheet' media='screen and (min-width: 552px) and (max-width: 806px)' href='css/medium.css' />
        <link rel='stylesheet' media='screen and (min-width: 806px) and (max-width: 9999999px)' href='css/regular.css' />
    </head>
    <body>
        <div id="header-div">
            <a href="index.html" id="header-div-a-regular">Mountain Springs Family Entertainment Center</a>
            <a href="index.html" id="header-div-a-small">Mountain Springs FEC</a>
            <div id="header-div-menubutton">
                <hr id="hr-1">
                <hr id="hr-2">
                <hr id="hr-3">
            </div>
            <ul>
                <li><a href="#specials/events" onclick="return specialsEventsAppend()">Specials/Events</a></li>
                <li><a href="#bookit" onclick="return bookitAppend()">Book it!</a></li>
                <li><a href="#schedule" onclick="return scheduleAppend()">Schedule</a></li>
            </ul>
        </div>
        <div id="mobileMenu-div" style="display:none">
            <center>
                <ul id="mobileMenuUl">
                    <li id="ulfirstli"><a href="#about" onclick="return specialsEventsAppend()">Specials/Events</a></li>
                    <li><a href="#bookit" onclick="return bookitAppend()">Book it!</a></li>
                    <li><a href="#schedule" onclick="return scheduleAppend()">Schedule</a></li>
                </ul>
            </center>
        </div>
        <div id="maincontent-div">
            <p id="unsuported-p">Sorry but this screen resolution is unsuported :/<p>
        </div>
    </body>
</html>
<script>
    jQuery(document).ready(function() {
        $('#header-div-menubutton').live('click', function(event) {
            toggleMobileMenuDiv();
        });

        function toggleMobileMenuDiv() {
            $('#mobileMenu-div').slideToggle("fast");
        }
    });
    function mobileMenu() {
        var div = document.getElementById('mobileMenu-div');
    }
    function specialsEventsAppend() {
        var div = document.getElementById('maincontent-div');
        //clears everything in the div
        div.innerHTML = "";
        //puts the content into the div
        div.innerHTML = div.innerHTML + 'Extra stuff';
    }
    function bookitAppend() {
        var div = document.getElementById('maincontent-div');
        div.innerHTML = "";
        div.innerHTML = div.innerHTML + '<center><div id="bookit-div"><p> January 20<sup>th<sup><div id="bookit-list"></div></div><center><center><div id="bookit-div"><p> January 21<sup>st<sup><div id="bookit-list"></div></div><center><center><div id="bookit-div"><p> January 22<sup>nd<sup><div id="bookit-list"></div></div><center><center><div id="bookit-div"><p> January 23<sup>rd<sup><div id="bookit-list"></div></div><center>';
    }

    function scheduleAppend() {
        var div = document.getElementById('maincontent-div');
        div.innerHTML = "";
        div.innerHTML = div.innerHTML + '<center><h3>Days available for reservations</h3></center><center><table><tr><th>Day</th><th>Time</th></tr><tr><td>Sunday</td><center><td>Closed</td></center></tr><td>Monday</td><center><td>8:00-11:00</td></center></tr><tr><td>Tuesday</td><center><td>8:00-11:00</td></center></tr><tr><td>Wensday</td><center><td>8:00-11:00</td></center></tr><tr><td>Thursday</td><center><td>8:00-11:00</td></cetner></tr><tr><td>Friday</td><center><td>10:00-11:00</td></center></tr></table></center>';
    }
</script>

Answer 1

将代码分成两个文件：例如：index.html ...除了php代码之外，在这里添加所有html 的index.php 在函数调用之后立即添加所有php代码，例如：loadReservationPlaces（）; 然后在index.html中加载jquery，在标记的上方（将很容易编写代码）

<script type="javascript" src="pathToYourjQueryLibrary/jQuery.hs"><script>

然后在你的js脚本中用$ .ajax（）：

调用index.php

$。AJAX（{ 方法：“POST”， url：“index.php”}）。done（function（msg）{ 的console.log（MSG）; }）;

检查您的浏览器js控制台

用JavaScript调用mysql数据库查询

1 个答案: