javascript - 使用 javascript/jquery/php 更新 div 的内容

Question

我目前正在制作一个网页，希望用户根据他们选择的结果查看不同的数据库结果。结果将通过按钮选择，或者通过手动输入文本区域的查询来选择。

我已连接到数据库，所有内容都在外部 PHP 脚本中设置，我目前正在使用“require”链接到我的网站。在这个 PHP 脚本中，我有一个“查询”变量。

我希望此变量取决于用户输入的任何值。

我想这应该可以通过在 javascript 中使用某种 $query = $POST['entry'] 和某种 Ajax 调用来实现？我只是不知道这整件事应该如何组合在一起。

如果我们假设我的菜单和容器看起来像这样，其中 getData.php 是 $query 变量所在的位置以及返回数据库数据的地方。

<div id="menu">
    <textarea class="queryText" name="queryText" placeholder="Enter the query..."></textarea>
    <input class="menuButt" type="button" value="Submit" onclick="JavaScript:ChangeDivVal();"/>

</div>
<div id="container">
    <?php
        require 'getData.php';
    ?>
</div>

这是一张图片，如果它有助于我解释我想做什么的话。

我非常感谢能得到的任何帮助!

//安布罗斯

Answer 1

将文本区域(查询字符串)的输入传递给 php 并将数据库输出返回给 javascript 的机制简洁明了。从那里您可以轻松地将它附加到您想要的任何 dom 节点。

我个人使用 jQuery 做一些事情，因为它非常方便。您可能想出于简单目的使用加载函数:

$( document ).ready(function() {
    $('#querySubmitButton').click(function (evt)
    {
        evt.preventDefault(); // stops the submit taking place
        var myQuery = $('#queryText').val(); // get the query value

        // load data received from php script into the dom container
        $('#container').load('getData.php', { query:myQuery, anotherVar:null });
    });
});

加载函数只是将所需脚本输出的所有内容加载到给定的 domnode 中。您可以在第二个参数中添加任意数量的参数，甚至可以使用回调在加载后执行更多 js。详情见http://api.jquery.com/load/ .

哦，顺便说一下，我将您的 html 更改为:

<div id="menu">
    <textarea id="queryText" name="queryText" placeholder="Enter the query..."></textarea>
    <input id="querySubmitButton" type="button" value="Submit"/>
</div>
<div id="container"></div>

在您的 getData.php(我假设它生成纯 html)中，您可以使用 php 的 $_POST var 来获取查询。

$query = $_POST['query'];